question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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: https://github.com/tailwindlabs/tailwindcss/pull/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: https://github.com/tailwindlabs/tailwindcss/pull/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`

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:5
  • Comments:22

github_iconTop GitHub Comments

10reactions
slavanossarcommented, Apr 8, 2022

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/**'
      ]
    }
  }
5reactions
fabis94commented, Jul 6, 2021

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

image

Read more comments on GitHub >

github_iconTop Results From Across the Web

tailwindcss@2.1.3 will cause every single file in the project to ...
Any file in the project, including node modules, markdown files, github workflows, IDE specific files, anything is being watched and trigger ...
Read more >
Tailwindcss doesn't provide a proper styles file - Stack Overflow
So that is due to the latest version of the tailwind CSS V3. The JIT is enabled by default and it will only...
Read more >
tailwindcss | Yarn - Package Manager
Fast, reliable, and secure dependency management.
Read more >
Content Configuration - Tailwind CSS
We can't tell webpack to only watch *.html files in a directory for example. That means that if building your CSS causes any...
Read more >
Configuring TailwindCSS for Sapper - DEV Community ‍ ‍
css . You can choose any name that's not taken yet in your project. In the next section, we'll import the built CSS...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found