Removed '@tailwind base' import from content script as it was causing negative effects on pages

[eelmafia]

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.

[JohnBra]

@NoxQ the template defines a default content script pattern matching in the manifst, which currently targets ALL pages.

manifest.json
...
 "content_scripts": [
    {
      "matches": [
        "http://*/*",
        "https://*/*",
        "<all_urls>"
      ],
      "js": [
        "src/pages/content/index.tsx"
      ],
      "css": [
        "contentStyle.css"
      ]
    }
  ],
...

You probably want to limit where the content script will be loaded according to the chrome docs.

Injecting tailwind into the webpage will always have these kind of sideeffects. In case of the content script you might have to use something other than tailwind, but you can still use tailwind for the rest of the extension pages.