Postcss / hot reload build of tailwind-config classes not working

[julianlangweb]

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: npm@10.8.2
• Builder: -
• User Config: compatibilityDate, devtools, modules, primevue, googleFonts, app, css, postcss, runtimeConfig, supabase
• Runtime Modules: @nuxt/content@3.6.0, @primevue/nuxt-module@4.3.5, @nuxtjs/google-fonts@3.2.0, @nuxtjs/tailwindcss@7.0.0-beta.0, @nuxtjs/supabase@1.5.2
• 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

[ineshbose]

Hi, thanks for opening an issue and sorry for my late response. Can you provide more context by possibly create a repro please? 🙏

[LorenzoRottigni]

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.

[LorenzoRottigni]

@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.

[LorenzoRottigni]

Here's my working reproduction:
https://github.com/LorenzoRottigni/nuxt-tailwind-hmr-bug