Tailwind Css hot reloaded on every change in every pages

[aminshafieed]

Hi. i'm using nuxt/tailwindcss in my project. the problem is that even if i change a text, tailwindcss.css hot reloaded too and it take too long(more than 10 second).
how can i disable tailwind hot reload in nuxt 3

[ineshbose]

Hi, thanks for opening an issue on this repository. I'll provide you with an explanation on why this happens -

1. Tailwind CSS is a PostCSS plugin in your (Vite/Webpack/etc) application.
2. Tailwind CSS has a content detection system to only provide you with classes that you use in your source-code.
3. In that, you may be holding the classnames as strings in variables, passing them directly in the HTML, etc - all in all, it tries to do a quick search for the classes in your source files.
4. When you change code, it could mean that the character you provide may be to specify/remove a classname to Tailwind, so HMR triggers.

Tailwind v4 may be looking to address some performances or mechanisms on this, but the HMR should not take so long in your project, so this may be some configuration causing a bottleneck (perhaps you would like to share your {nuxt,tailwind}.config). A minor related issue to page reloads on HMR is here that is under investigation - #877.

how can i disable tailwind hot reload in nuxt 3

If you switch to nightly release, you can use the disableHMR option. I hope this helps. 🙂