Tailwind HMR does not work with Next.js with symlinks

[nahtnam]

What version of Tailwind CSS are you using?

3.4.1

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

Next.js 14.2.1 with tailwind 3.4.1

What version of Node.js are you using?

v20.9.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://github.com/nahtnam/tailwind-symlink-bug

Describe your issue

1. Clone the above repo
2. Start the server
3. Go to the prose and add prose-sm, prose-lg, or prose-xl. It will not generate the class name. If you restart the server it does. You can also do something like py-[100px]
4. Remove the folder src/app/(symlink) (which contains a symlink)
5. Now add or change the prose sizing and it works fine

[angela683h]

You’re encountering a known issue with Tailwind CSS and Next.js where Hot Module Replacement (HMR) does not work correctly with symlinks. This can prevent Tailwind from generating the correct class names on the fly. Here’s a quick summary of what you can do:

Remove symlinks: As you’ve noticed, removing the symlink resolves the issue.
Restart the server: Restarting the server can temporarily fix the problem by regenerating the classes.

I hope it's helpful to you.

Best Regard,
angela683h
Official Website