[NEXT-667] Next 13 + Tailwind hot-reload of classes doesn't work in Firefox Browser

[kleinesNugget]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro
Binaries:
  Node: 19.3.0
  pnpm: N/A
Relevant packages:
  next: 13.1.2-canary.2 // Canary 3 and 4 wouldn't render a page for me, so I couldn't try with those. Have heard this issue from others as well though.
  eslint-config-next: 13.1.1
  react: 18.2.0
  react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue

https://github.com/vercel/app-playground

To Reproduce

• Grab latest version of Next.js (I'm using the playground example)
• It seems to be irrelevant whether you are using the app-directory or not
• It also seems to be irrelevant whether you are using turbopack or not
• Load project, go to /streaming
• In your editor, go to Product.tsx and edit a class with a width class w-* (go to line 75)
• Start the server with npm run dev
• Swap w-1/3 for w-6/12 save and wait for hot-reload (Use Firefox as your the Browser)
• You won't see your new class applied, element will break due to class not being applied
• Go back to editor and try now w-10/12, wait for hot-reload. Same result as above.
• Set it now to w-6/12 and manually reload, you will see your class now (and it seems to be caching this class now)
• If you repeat the steps above w-6/12 won't fail anymore because it seems to be cached now somehow

Describe the Bug

Pretty much the exact same bug has already been brought up and fixed, but it doesn't seem like the fix has worked for Firefox users, as they still complain on the issue and one user figured that it seems to be related to Firefox and I could confirm that the issue doesn't appear on Chrome. (#43878)

Hot reloading of Tailwind CSS in Firefox when you change classes in your code doesn't work.
Only works after you apply a new class and manually reload the page or restart.
Hot reloading of the class will only work if it existed before, but not if it has to be generated.

Expected Behavior

Swapping Tailwind classes from elements should work in Firefox when hot-reloading and properly generate them accordingly.

Which browser are you using? (if relevant)

Not working in Firefox 108.0.2 (64-bit); Working in Chrome 110.0.5481.30 (Offizieller Build) dev (64-Bit)

How are you deploying your application? (if relevant)

next run dev

_NEXT-667

[emi2k01]

I use firefox and this happens to me too.

While trying Chrome, I noticed that, after a fast-refresh, the scroll position was reset because the styles are removed for a moment. Not sure how related this is to this issue.

[kleinesNugget]

I use firefox and this happens to me too.

While trying Chrome, I noticed that, after a fast-refresh, the scroll position was reset because the styles are removed for a moment. Not sure how related this is to this issue.

I've also noticed Chrome completely turning white for a split-second when hot-reloading, which I didn't ever recall in any version of next on Firefox. Thought I just overlooked it, but I guess it somewhat is different.

[idebeijer]

Since Next 13.0.5 fast-refresh doesn't actually seem to refresh the tailwind classes on Firefox. I've tried all versions of Next after 13.0.4 (not the canary releases), but no luck.

I've tried it on the default release of Firefox and on the Developer Edition of Firefox but it only seems to work when I use Chrome or Safari.

So I guess downgrade to 13.0.4 for now if you want it to properly fast-refresh.

[clovis-rosa]

So I guess downgrade to 13.0.4 for now if you want it to properly fast-refresh.

Just a heads up to all of you. Even if you downgrade to the v13.0.4, while you're developing the window(browser) will be updated when you change your CSS, but if you watch close in Firefox, inside the devtools, that specific CSS value that you just changed, was not updated. You can try and see it right now with any Next, React, Vite versions or whatever.

I'm not sure if it is a bug or a feature that just works on Chrome.

8 months I reported it to the Firefox bug team, but no updates so far...
Bugzilla issue: https://bugzilla.mozilla.org/show_bug.cgi?id=1776831

Here a vanilla js example that was made by the Firefox team to show it. Open in both browsers and watch the devtools behaviour: https://bug1776831.bmoattachments.org/attachment.cgi?id=9283174

The reason I'm posting it here is first, to make you all aware, and second, I'm not sure if it's related or/if you will be able to fix it in the React side.

Hope it helps! ✌️

[zcorpan]

Thanks @clovis-rosa, I've commented in the Firefox bug that it might cause this issue.

[urbenlegend]

This issue seems to be independent of TailwindCSS when using appDir. I simply created a new project using create-next-app with appDir enabled and then tried changing the --border-radius variable from 12px to 50px. Nothing changed on the site in Firefox, but it changed in Chromium. This does not happen when I don't use appDir.

[quick007]

currently experiencing in chrome as well

[Victor239]

What does "closed as not planned" mean here? This will be a permanent bug?

[timneutkens]

Bug in our sync to linear and back, it was closed as a duplicate of another issue.

It's closed as a duplicate of #43396.

[Victor239]

Ah I see, thanks!

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.