tailwindlabs / tailwindcss

A utility-first CSS framework for rapid UI development.
https://tailwindcss.com/
MIT License
83.27k stars 4.22k forks source link

v4 blows up Next.js with custom `distDir` #15050

Closed vladmoroz closed 1 day ago

vladmoroz commented 2 days ago

HMR blows up the server when using v4 in a project with a custom distDir in the Next.js config

What version of Tailwind CSS are you using?

"@tailwindcss/postcss": "4.0.0-alpha.34",
"tailwindcss": "4.0.0-alpha.34",

This wasn't an issue in "4.0.0-alpha.30", started happening in "4.0.0-alpha.31"

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

Next.js 15

What version of Node.js are you using?

Node.js 20

Reproduction URL

https://codesandbox.io/p/devbox/tphzmv?file=%2Fnext.config.js%3A4%2C3

https://github.com/user-attachments/assets/f2cf5118-c83a-42c5-91a4-56152dbb759d

philipp-spiess commented 1 day ago

@vladmoroz Thanks for reporting this. I was able to reproduce this very annoying issue and have fix it in #15053. We'll get this out to you soon!

One note from your repro is that you still want to include the custom distDir in your .gitignore list, otherwise there will still be an unexpected loop. I suspect this was already happening in your project though (since you mentioned it worked before alpha 31) and you just omitted it in the repro but I wanted to document it here regardless 👍

vladmoroz commented 1 day ago

Hey, thanks for such a quick fix. And yeah, our distDir is already gitignored in the real project.