Use Tailwind in Content Script of Browser Extension

Question

I'm trying to write a browser extension which injects some buttons and custom components into a website, therefore I wanted to use Tailwind (and DaisyUI) to style them.

I found this discussion and configured my project according to the solution and I got Tailwind and DaisyUI working for the popup of my extension. My App.css looks like

@tailwind base;
@tailwind components;
@tailwind utilities;

This gets imported in my Popup.tsx with import "../App.css"; . No problems there.

But when I try to do the same import in my content-script, I don't get any errors, but the script somehow fails/doesn't get executed at all anymore. If I put in a console.log without importing App.css , it gets printed. If I import App.css , it's not shown anymore.

Could this be an error with my webpack/postcss-config or is there something else preventing me from using custom CSS in the content script? I'm confused because it's working in the popup without any problems.

EDIT: The problem seems to appear no matter what CSS-file I try to load in the content-script.

Answer 1

I encountered the same problem but hopefully I found a solution.

In my webpack config, I specified in the plugins section, that I want to copy my file named tailwind.css into dist .

My file structure

src/
 - ContentScript.tsx (imorting tailwind.css)
 - tailwind.css

-- output is generated below
dist/
 js/
   contentScript.js
   tailwind.css
 manifest.json

In webpack.config.js

const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  // Other config goes there
  plugins: [
        new CopyPlugin({
            patterns: [
                {
                    from: "src/tailwind.css",
                    to: "./",
                },
            ],
        }),
    ],
 }

In manifest.json

{
  // other config
  "content_script": [
  {
    // your config
    "css": ["js/tailwind.css"],
    "js": ["js/contentScript.js"]
  }
  ],
  "web_accessible_ressources": [
  {"resources": ["js/*"]}
  ]
}