search

nuxt-modules / tailwindcss

Tailwind CSS module for Nuxt
https://tailwindcss.nuxtjs.org
MIT License
1.67k stars 182 forks source link

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

Closed fabis94 closed 1 year ago

fabis94 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

munjalpatel commented 2 years ago

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

vdtrungok commented 2 years ago

same issue. :((

sxgrant commented 2 years ago

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 commented 2 years ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

This issue is still occuring

"devDependencies": {
  "@nuxt/devtools": "latest",
  "@nuxtjs/tailwindcss": "^6.8.0",
  "@types/node": "^18.17.1",
  "nuxt": "^3.6.5"
}
fabianwohlfart commented 1 year ago

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 commented 6 months ago

bug still exist

"@nuxtjs/tailwindcss": "^6.11.4",
"tailwindcss": "^3.4.3"
raggesilver commented 5 months ago

Still happening.

This also happens when I install tailwind manually (without this module). 🤔

pooya-hajjar commented 5 months ago

same issue . enable disable cache in your browser then refresh that

ineshbose commented 5 months ago

Definitely sounds like a cache issue to me!

pooya-hajjar commented 5 months ago

youre welcome buddy