Hot module replacement is not picking css changes after editing tailwind class in components

[atur94]

What version of Tailwind CSS are you using?

v3.2.4

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

"next": "13.0.5",
"autoprefixer": "^10.4.13",
"postcss": "^8.4.19",

What version of Node.js are you using?

v18.4.0

What browser are you using?

Firefox, Chrome, Edge

What operating system are you using?

Windows 10

Reproduction URL

Minimal reproduction repo based on steps included in: https://tailwindcss.com/docs/guides/nextjs#app-directory
https://github.com/atur94/nextjs-tailwind-issue-reproduce-sample

Repo is all set and ready to use. I noted each step in README that was used to create that project and was needed to reproduced that issue

Describe your issue

Changing tailwind class names in *.tsx components does not trigger browser to reload the style file. After changing class names in tsx components, html updates but the styling is gone because initially loaded css does not include definition of newly added class. After manual reload style is loading fine.

I observed that, after each change(for example changing from bg-red-500 to bg-blue-500 in component, new class is appended to: ./next/static/css/app_globals_css.css so that means that tailwind is working as supposed to. It seems that there is something with Hot Module Replacement.

Described behaviour exists when env variable is set to TAILWIND_MODE=watch

I am beginner in javascript, typescript, next and tailwind but I am sure that it shouldn't behave liek that

Steps to reproduce issue

1. Add color class to app/page.tsx for example bg-red-500
2. Run app with npm run dev
3. Enter localhost:3000
4. Change background color class to something different(ex. bg-red-600) and save file
5. File .next/static/css/app_globals_css.css has updated and added class exists at the end of file
6. Background color on the page disappears because css file is not reloaded and new class does not exist in currently loaded file
7. Reload page manually - change should be now visible
8. Change background class again
9. Add anything to app/globals.css and save it, still css is not refreshed

After each step in the developer console message [Fast Refresh] rebuilding is printed. In the terminal, log below is printed

wait  - compiling...
event - compiled client and server successfully in 178 ms (332 modules)

Workaround for chrome

1. Open developer console
2. Go to settings -> workspace
3. Add folder ~/.next/static/css
4. After that step, all the css changes should be visible immidiately after fast refresh

Video that shows following issue

[thecrypticace]

Hey, so we've looked into this and it appears that this is the result of a bug in Next.js. They released v13.0.5 removing cache busting for CSS assets causing this problem. There is already an issue opened on the Next.js repo for this problem.

In the short term, I recommend downgrading to Next.js 13.0.4 until they release a fix.

As you discovered the CSS file itself is regenerated but HMR does not pick up the change because it appears to rely on either:

• the URL being different between builds; OR
• being notified directly about a change in the content of the source CSS file itself

This is causing issues with more than just Tailwind CSS. It also breaks postcss-import as well as any other plugins making use of additional files to generate CSS, and even built-in Sass support.

[atur94]

Good to know. Thanks for your time

[thecrypticace]

Gonna close this as there's nothing that can be done from our side to fix this. We can keep track of this problem over in the linked Next.js issue. Thanks for bringing it to our attention!