search

guocaoyi / create-chrome-ext

🍺 Scaffolding your Chrome extension! Boilerplates: react \ vue \ svelte \ solid \ preact \ alpine \ lit \ stencil \ inferno \ vanilla
MIT License
1.72k stars 125 forks source link

how to use tailwindcss in contentScript #87

Closed Kain-90 closed 4 months ago

Kain-90 commented 4 months ago

I can already use tailwindcss in addition to contentScript.tsx, but the same configuration doesn't work for me in contentScript, how do I configure it?

similar to https://github.com/guocaoyi/create-chrome-ext/issues/80

btw, I've also already spent a lot of time on stackoverflow and google with no luck.

Kain-90 commented 4 months ago

Now it's finally resolved, The method comes from the https://github.com/crxjs/chrome-extension-tools/issues/609

# index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
# index.tsx
...
import css from './index.css?inline'
...
createRoot(root).render(
    <React.StrictMode>
      <style type="text/css">{css}</style>
      <App />
    </React.StrictMode>
)

full process: https://kainhub.com/blog/how-to-use-react-and-tailwindcss-in-chrome-extension-content-scripts