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 👍