Webpack hot reloading loop with Gatsby + Tailwind v4 (after migration)

[jasonohdz1501]

What version of Tailwind CSS are you using?

Tailwind 4.1.3

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

"gatsby": "^5.14.1", "gatsby-plugin-postcss": "^6.13.1"

What version of Node.js are you using?

v20.13.1

What browser are you using?

Chrome

What operating system are you using?

macOS

Describe your issue

After upgrading to Tailwind v4, I've found issues when running gatsby develop, cause seems that the new configuration of Tailwind is crashing with the way Webpack and Gatsby watch the css changes through postcss. My guessing is that since Gatsby is using 'gatsby-plugin-postcss', seems that now the separate postcss package for tailwind is crashing the hot reload and it's causing an infinite loop, by console it's throwing this:

[HMR] css reload http://localhost:8000/commons.css
client.js:247 [HMR] bundle 'develop' rebuilt in 226ms
client.js:238 [HMR] bundle rebuilding
client.js:247 [HMR] bundle 'develop' rebuilt in 229ms
client.js:238 [HMR] bundle rebuilding
client.js:247 [HMR] bundle 'develop' rebuilt in 232ms
client.js:238 [HMR] bundle rebuilding
client.js:247 [HMR] bundle 'develop' rebuilt in 245ms
client.js:238 [HMR] bundle rebuilding
process-update.js:123 [HMR] Updated modules:
process-update.js:125 [HMR]  - ./.cache/blank.css
process-update.js:125 [HMR]  - ./src/styles/globals.css

So, I've tried several things such as: included importing the tailwind.config.js per as docs, keep the @tailwind base; @tailwind components; @tailwind utilities;, among others

Before, to try implement a different way of using tailwind, which will be stay apart of webpack-postcss, instead going down through a separate build process using tailwindcss/cli and include that extra step in the build pipeline. I'd like to validate with you if there's some solution that I'm not seeing, thanks

[wongjn]

Consider providing minimal git repo that reproduces the unexpected behavior please, so we can debug.

[philipp-spiess]

@jasonohdz1501 Hey! It would really help a lot of you can create a minimal reproduction of this issue that we can take a look at. Otherwise there's not really much we can do to help here and I'll have to close the issue.

[philipp-spiess]

Migrated this to a discussion due to the absence of a reproduction so it's not really actionable for us. Happy to look into concrete bug reports though!

[justpierre003]

I am having this same issue, any fixes?

[wongjn]

Would you be able provide a git repo please? We can then debug and look for a solution

[arussoproductions]

This is mentioned in the docs at https://www.gatsbyjs.com/docs/how-to/styling/tailwind-css/

If you use [GraphQL Typegen](https://www.gatsbyjs.com/docs/how-to/local-development/graphql-typegen/) a file at src/gatsby-types.d.ts will be generated and with the default configuration for content in tailwind.config.js this will trigger an infinite loop

there are two potential solutions mentioned in those docs - however I'm not finding the solutions to work for me at the moment