search

tailwindlabs / tailwindcss

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

Tailwind HMR does not work with Next.js with symlinks #13533

Open nahtnam opened 7 months ago

nahtnam commented 7 months ago

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
cris458carlo commented 2 months ago

Hello, You are encountering an issue with Tailwind CSS 3.4.1 and Next.js 14.2.1 where class names like prose-sm, prose-lg, or prose-xl are not being generated unless you restart the server. This issue seems to be related to the presence of a symlink in your project directory.

Here are a few steps you can try to resolve this issue:

Check Tailwind Configuration: Ensure that your tailwind.config.js is correctly set up to include the paths where your classes are used. Sometimes, symlinks can cause paths to be misinterpreted. Update Dependencies: Make sure all your dependencies are up to date. Sometimes, issues are resolved in newer versions of the tools you’re using. Symlink Handling: Since removing the symlink seems to resolve the issue, you might want to avoid using symlinks in your project if possible. Alternatively, you can look into configuring your build tool to handle symlinks more gracefully. Tailwind JIT Mode: If you’re not already using it, consider enabling JIT mode in Tailwind CSS. JIT mode can sometimes handle dynamic class generation more efficiently. File Watching: Ensure that your development server is correctly watching all files, including those accessed my ford benefits via symlinks. You might need to adjust your file watching settings.

midzdotdev commented 2 weeks ago

I can confirm that symlinks in the watch directory still trip up HMR on the latest versions of the following dependencies: