[BUG] JIT doesn't build styles on cold start

Version

@nuxtjs/tailwindcss: 4.0.1 nuxt: 2.15.3

Reproduction Link

https://github.com/eggsy/website

Steps to reproduce

• Enable JIT mode by putting { jit: true } in nuxt.config.js > tailwindcss.
• Start or build your app.
• See the result (no classes are actually built, the page doesn’t include any styles).

What is Expected?

Should parse the class names and include them in the output file.

What is actually happening?

Seems like it’s not able to read class names on the initial/cold start. It works and able to parse classes on HMR (when you edit a page/component/layout) and applies styles.

I’ve actually posted this before the v4 was merged with #287 but it got merged without me getting a “proper” answer. We have also discussed this on Nuxt.js’ Discord guild (click here to jump to message) and 2 other people reported the same issue. Tried some ways but couldn’t find anything that actually fixes this issue.

Maybe it’s because I have a separate source dir, or something else. This also happened with Windi CSS and I thought it was a bug, now I started to think about this is an issue with Nuxt/PostCSS.

This is what happens at the first start:

This happens when I re-save (without any changes) my index.vue (grids and other classes on the page are built successfully):

This is what happens when I re-save (again, without any changes) my layout, default.vue:

And re-saving my navbar and theme switch component:

So, I was able to get my index page working by editing 4 different files, and it’s not even fully working as expected. It gets reset when you build your app again…

[eggsy]

It strangely started working after a yarn upgrade today, don’t know what happened.

[Neodark7]

@RomainMazB sorry for the late answer, actually the issue seems to be gone with the 4.1.0 version of the module, using npm.