vite-web-extension
vite-web-extension copied to clipboard
Removed '@tailwind base' import from content script as it was causing negative effects on pages
The content script runs in the context of normal web pages. That means that the context script's CSS mixes with the DOM's CSS and can cause unforeseen side effects.
The @tailwind base
import adds a bunch of base CSS rules to the content script's CSS file which in turn causes the content script to inject all that unnecessary (and sometimes page-breaking) CSS into the DOM and override the page's styles.
I've noticed this happen in a few places, one was Gmail, and another was the old.reddit.com site.
The issue I was having in Gmail was that sometimes contacts' profile pictures would be squished and upon investigating I found out that it was because @tailwind base
adds some table{ }
rules which override Gmail's table{ }
rules causing the profile picture squishing.
Removing the base import fixed the issue for me without affecting the CSS of the actual content script itself.