Classes not being loaded in dev mode until Nuxt dev server is restarted

[fabis94]

Version

@nuxtjs/tailwindcss: 5.0.3
nuxt: 3.0.0-rc.1 (with vite builder)
tailwindcss: 3.0.24

Steps to reproduce

1. Run nuxt dev server
2. Add a tailwind class to a Vue component that previously wasn't used anywhere in the project
3. The new class won't work until you restart dev server

What is Expected?

The class should be added to the page's CSS immediately after it's used for the first time in the project (e.g. in a Vue component).

What is actually happening?

Class doesn't appear, even after refreshing. Only after nuxt is restarted does the new class get added to the page. OR if the tailwind.css file is saved.

(I don't know why a saved change to tailwind.css causes tailwind to see the new class usage, but a saved change to the vue file that actually uses the class doesn't. The vue file is definitely correctly specified under 'content' in the tailwind config, otherwise it wouldn't even work after restarting the dev server)

[Owen-Tsai]

Well, on my end:

1. The problem doesn't always occur. Sometimes things work perfectly fine, the module is able to pick up changes and reload the view with compiled style rules.
2. When the changes cannot take effect, I can see a quick flash with expected styles and then quickly disappear, falling back to the "older state" as if there isn't any newly added class. I guess that quick flash is when tailwindcss itself generates tailwind.css output with the correct result, and then when the content of tailwind.css is about to insert into the DOM something unexpected happens which results in the incorrect behavior. The compiled style rule of the new class isn't added in the <style> tag.
3. When the issue occurs, I guess I have to trigger the compile again to get it working. So I tried to remove the newly added class that cannot take effect, save the file to trigger the compile, and then add it back. The problem is gone, only for a little while. I have to repeat the process every time I encounter the issue. It feels like the content inside the <style> tag is "1 commit behind" the tailwindcss output.

[Aybee5]

I am experiencing this too. Did anyone find a quick work around?

[munjalpatel]

I am having the same issue. I am using nutx3 with pnpm if that matters.

[vdtrungok]

same issue. :((

[sxgrant]

A workaround for local development is to just whitelist every single tailwind class. This adds ~27,000 lines of CSS directly in your head so it's a terrible idea, but it unblocks development - can just disable this config when building for deployments.

in tailwind.config.js:

module.exports = {
 ...
 // Due to issue of class-detection not auto-refreshing
 // Disable this to build for production
 safelist: [
 {
 pattern: /.*/,
 },
 ],
 ...
}

[makkarpov]

By the way, I was able to get that issue consistently reproducing under the playground of this module.

The issue starts to reproduce when you add some extra CSS to css tag, e.g.:

export default defineNuxtConfig({
 buildModules: [
 tailwindModule
 ],
 tailwindcss: {
 exposeConfig: true
 },
 css: [
 '@fontsource/inter/400.css',
 '@fontsource/inter/500.css',
 '@fontsource/inter/600.css',
 '@fontsource/inter/700.css'
 ]
})

Also, it requires router to be present, so app.vue won't work, while pages/index.vue will.

---

@fabis94:

(I don't know why a saved change to tailwind.css causes tailwind to see the new class usage, but a saved change to the vue file that actually uses the class doesn't. The vue file is definitely correctly specified under 'content' in the tailwind config, otherwise it wouldn't even work after restarting the dev server)

Because there is no way for the build system to know dependencies between Vue and CSS, and that HMR should replace the CSS file when your Vue file changes. From bundler point of view these two are completely unrelated, but really CSS content is dependent on markup.

I wonder why HMR even worked in the first place. From my understanding, it shouldn't.

[pauljmartinez]

I resolved this issue by adding ./error.vue to my tailwind.config.js. It seemed like Tailwind needed to look at the contents of this file to be able to include the relevant classes.

module.exports = {
 content: [
 "./components/**/*.{js,vue,ts}",
 "./layouts/**/*.vue",
 "./pages/**/*.vue",
 "./plugins/**/*.{js,ts}",
 "./nuxt.config.{js,ts}",
 "./error.vue",
 ],

[manuel-84]

same problem with

"@nuxtjs/tailwindcss": "^6.6.5",
"nuxt": "^3.3.3",

when using default Tailwind CSS file from runtime/tailwind.css instead of creating your own

[ineshbose]

Closing this issue as it is believed to be resolved/stale now - please feel free to comment if it is still an issue in the latest version of the module.

[jshrssll]

This issue is still occuring

"devDependencies": {
 "@nuxt/devtools": "latest",
 "@nuxtjs/tailwindcss": "^6.8.0",
 "@types/node": "^18.17.1",
 "nuxt": "^3.6.5"
}

[fabianwohlfart]

This issue is still occuring

"devDependencies": {
 "@nuxt/devtools": "latest",
 "@nuxtjs/tailwindcss": "^6.8.0",
 "@types/node": "^18.17.1",
 "nuxt": "^3.6.5"
}

Did you solve it?

[brokuka]

bug still exist

"@nuxtjs/tailwindcss": "^6.11.4",
"tailwindcss": "^3.4.3"