Can't ignore files in the content glob

[nrandell]

What version of Tailwind CSS are you using?

3.0.24

What build tool (or framework if it abstracts the build tool) are you using?

Gatsby 4.15
Postcss 8.4.14

What version of Node.js are you using?

16.11.1

What browser are you using?

Edge: Spartan (44.22000.120.0), Chromium (101.0.1210.53)

What operating system are you using?

OS: Windows 10 10.0.22000
CPU: (16) x64 AMD Ryzen 7 PRO 4750G with Radeon Graphics

Reproduction URL

https://github.com/nrandell/gatsby-tailwind-loop

Describe your issue

One of the new gatsby features is the ability to generate the graphql types to make the code easier to manage. This is generated as src/gatsby-types.d.ts. However when this is generated it causes the gatsby webpack build to restart.

I've tried to ignore the file in the glob by setting my content to

  content: ["./src/**/!(*.d).ts", "./src/**/*.tsx"],

You can see more information and some early diagnosis in gatsby issue gatsbyjs/gatsby#35775

[thecrypticace]

Hey, thanks for the report!

The core of the problem here is that, since Gatsby is using webpack internally, only directories are watched and not globs. We still pass the glob along, it's just that it is ignored by postcss-loader and/or webpack. This is just an unfortunate webpack limitation. We do some filtering in Tailwind CSS when rebuilding to skip doing work when changed files do not match the glob. However, we do not have the ability to prevent webpack from running at all.

Instead, I would suggest updating your content array glob to be a bit more strict so it doesn't cover the entire src folder. The following glob is rooted at ./src/pages instead of ./src and will prevent the rebuild loop from happening:

content: ["./src/pages/*.tsx"],

An alternative is using the Tailwind CLI alongside Gatsby using something like concurrently to run the development server and the Tailwind CLI. We support all the fancy globs there as we're able to control file watching directly in it rather than rely on the tool Tailwind CSS is being integrated with. We don't have a guide for using Gastby and the Tailwind CLI directly but you could possibly adapt the instructions from our Remix guide which does do this. You'll specifically want to look at the package.json scripts there.