tailwindcss@2.1.3 will cause every single file in the project to be watched

[foxted]

Version

@nuxtjs/tailwindcss: 4.1.3
nuxt: 2.15.6
tailwind: >=2.1.3

Reproduction Link

No reproduction link but here's the tailwindcss PR that causes the problem: tailwindlabs/tailwindcss#4530

Steps to reproduce

Install a new project with @nuxtjs/tailwindcss and tailwindcss@2.1.3 or higher.

What is Expected?

Only the relevant project files are being watched and trigger a nuxt rebuild.

What is actually happening?

Any file in the project, including node modules, markdown files, github workflows, IDE specific files, anything is being watched and trigger a nuxt rebuild.

---

I think it comes from the new behaviour brought by this PR: tailwindlabs/tailwindcss#4530

This PR added a new "glob check" on paths provided to purge CSS. If the path is a glob, it will watch the directory instead.

Which is fine for these paths:

`${srcDir}/components/**/*.{vue,js,ts}`,
`${srcDir}/layouts/**/*.vue`,
`${srcDir}/pages/**/*.vue`,
`${srcDir}/plugins/**/*.{js,ts}`,

But this one is causing the issue:

`${rootDir}/nuxt.config.{js,ts}`

Tailwind will now consider this a glob and thus push the entire rootDir to be watched.

A potential quick fix for this would be to explicitly watch Javascript and Typescript config separately, to avoid tailwind thinking it must watch the whole directory:

`${rootDir}/nuxt.config.js`,
`${rootDir}/nuxt.config.ts`

[AlexanderBelokon]

I've created a minimal reproduction repo for this issue: https://github.com/AlexanderBelokon/nuxt-tailwind-watch
It only manifests itself when Tailwind's JIT is active and breaks git running on windows on WSL1.

[medairbit]

This issue also causes Webpack to constantly builds/rebuilds storybook.

[foxted]

@AlexanderBelokon It happened for me without Tailwind JIT active and I am overriding the purge CSS options in tailwind.config.js (but seems like the original config is applied as well)

[AlexanderBelokon]

@foxed That's interesting, in my repro I can't trigger this behavior without JIT, and I didn't find an override for purge that would do it. The paths in the original post have variables that are not defined, so I could not get them to (not) work as expected.

Could you please provide an example config that does?

[foxted]

The default paths are the following:

purge: {
    content: [
      `${srcDir}/components/**/*.{vue,js,ts}`,
      `${srcDir}/layouts/**/*.vue`,
      `${srcDir}/pages/**/*.vue`,
      `${srcDir}/plugins/**/*.{js,ts}`,
      `${rootDir}/nuxt.config.{js,ts}`
    ]
  }

Defined in https://github.com/nuxt-community/tailwindcss-module/blob/main/src/tailwind.config.ts

In my project's tailwind config, I have the following:

purge: {
        content: [
            'components/**/*.vue',
            'layouts/**/*.vue',
            'pages/**/*.vue',
            'templates/**/*.vue',
            'plugins/**/*.js',
            'nuxt.config.js'
        ]
    }

The problem comes from the use of {js,ts} on the nuxt config path, which results in watching {$rootDir}.

[AlexanderBelokon]

Added this to my repro: AlexanderBelokon/nuxt-tailwind-watch@2dfeb65, it does not trigger the problem on my machine without JIT, probably something else from your config is needed too.

[foxted]

Up to tailwind@2.1.2 it was working fine though 🤔

[creazy231]

any quickfix for this issue?

[fabis94]

@creazy231 I did this in my nuxt.config.js:

[creazy231]

thanks, that should do it till there is a fix for this issue 👍

[Atinux]

Could you please try https://github.com/nuxt-community/tailwindcss-module/releases/tag/v4.2.1 and confirm it's good?

[fabis94]

@Atinux seems to work for me, thank you!

[creazy231]

Could you please try https://github.com/nuxt-community/tailwindcss-module/releases/tag/v4.2.1 and confirm it's good?

works for me 👍

[AlexanderBelokon]

@Atinux works for me too, thanks a lot! 🎉

[Benjamin-Lee]

I reproduced this in 5.0.0-4 and the fix @fabis94 posted worked for me.

[93lucasp]

The problem is not fixed for "nuxt": "^2.15.8" "@nuxtjs/tailwindcss": "^5.0.2", @Atinux

[brendan1212]

@93lucasp Just experienced the same issue with those versions, also with the above solutions not working. At the moment, I'm able to temporarily fix by removing '@nuxtjs/eslint-module' from buildModules

[93lucasp]

@pachiraDIG yes removing '@nuxtjs/eslint-module' fixed the problem, thanks a lot.

But eslint now will continue to work? 🤔

[slavanossar]

This is still happening with @nuxtjs/tailwindcss@5.0.2, HMR is running when .eslintcache updates, and also when there are changes within the .git directory.

[93lucasp]

yes but you can fix it as @pachiraDIG seggested.

@Atinux could you give a look to this problem please? :)

[slavanossar]

Yep just wanted to add another report so the regression can get fixed.

For posterity (and so it can be easily copied), this is what needs to be added to nuxt.config.js

  watchers: {
    // Temporary fix: https://github.com/nuxt-community/tailwindcss-module/issues/359
    webpack: {
      ignored: [
        '**/*.eslintcache',
        '**/.git/**'
      ]
    }
  }

[93lucasp]

@slavanossar yes it is working also this solution, thanks a lot for sharing :)