How to use tailwindcss globally with HtmlBundlerPlugin?

[hqw567]

I'm using HtmlBundlerPlugin to bundle my HTML files in a webpack project. I want to use tailwindcss globally in my project, but I'm having trouble configuring it.

I've tried importing tailwindcss in my global main.scss file using @use 'tailwindcss/index.css';, but it doesn't seem to be parsed correctly. The styles are not applied to my HTML files.

The only way I've been able to make it work is by adding a link to the tailwindcss index.css file in my default.html layout file using <link rel="stylesheet" href="@styles/tailwindcss/index.css">.

Is there a way to configure HtmlBundlerPlugin to use tailwindcss globally without having to add the link to every HTML file? Any help would be appreciated.

Thanks!

[webdiscus]

Hallo @hqw567,

here is the small example how to use the tailwindcss.

Try to use:

npm i
npm start

Each HTML site should have an own style file, e.g.
home.html - home.scss
news.html - news.scss
etc.

Each page style can use the global main.scss where should be initialized tailwindcss.

Note: tailwindcss can be initialized in a SCSS/CSS file but not in inlined style in HTML.

[hqw567]

Thank you very much for your help!