nuxt-modules
Postcss / hot reload build of tailwind-config classes not working
Environment
- Operating System: Windows_NT
- Node Version: v20.19.0
- Nuxt Version: 3.17.5
- CLI Version: 3.25.1
- Nitro Version: 2.11.12
- Package Manager: [email protected]
- Builder: -
- User Config: compatibilityDate, devtools, modules, primevue, googleFonts, app, css, postcss, runtimeConfig, supabase
- Runtime Modules: @nuxt/[email protected], @primevue/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected]
- Build Modules: -
Reproduction
No response
Describe the bug
Somehow Hot compiling of custom tailwind classes in tailwind.config.js is not working.
Additional context
No response
Logs
Hi, thanks for opening an issue and sorry for my late response. Can you provide more context by possibly create a repro please? 🙏
Hello there!
I've been receiving errors like this for the past 4 years :') from Nuxt 2 to Nuxt 3 to Nuxt 4:
The text-primary class does not exist. If text-primary is a custom class, make sure it is defined within a @layer directive.
This issue has been present since the first beta of Nuxt 3 + Tailwind, and it's a nightmare.
In Nuxt 2, CSS/SASS/SCSS are generally stable. The only problem is that sometimes (≈2% of the time) the production build fails, claiming that a class specified in tailwind.css doesn't exist. Simply rebuilding the project fixes the problem.
In Nuxt 3, both CSS and SASS/SCSS throw this error during HMR in the development environment. Each time I change something, I have to fully rebuild the dev server to see the result. The production build exhibits the same issue reported for Nuxt 2.
In Nuxt 4, I encounter the same issues as Nuxt 3, with the addition that the production build breaks when using tailwind.sass. It now works only with tailwind.css, so I had to switch to CSS — this seems like a regression.
I have analyzed this issue in depth and tried every possible configuration of Nuxt, Vite, TailwindCSS, and PostCSS. I cannot see a solution that can be adopted on the user side.
@ineshbose I can work on a reproduction, but basically, it’s enough to create a tailwind.css containing a bunch of classes, include it in nuxt.config.ts, and use these classes within the Vue app. Firing HMR will trigger that error.
Here's my working reproduction: https://github.com/LorenzoRottigni/nuxt-tailwind-hmr-bug