NextJS 14 HMR Tailwind CSS reloading not working

[felipe-linares]

Link to the code that reproduces this issue

https://github.com/krishnerkar/next-intercepting-routes-demo

To Reproduce

1. Use the example next intercepting routes demo (originally based on Next 13)
2. Update to NextJS 14 (I personally tested 14.2.3 and 14.0.0 and had the same bug on both)
3. Change /app/@modal/(..)product to /app/@modal/(.)product or /app/@modal/(...)product (have to fix path on Next 14)
4. Add w-full to ProductDialogDescription in app/@modal/(...)product/[id]/page.tsx
5. Launch application
6. Try changing this width to w-2/12 or anything else and notice it won't hot reload the proper width.

Current vs. Expected behavior

I expected the new CSS class to be applied on hot reload, like it did in NextJS 13. However, the class seems to not be loaded and therefore not applied.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.4.0: Fri Mar 15 00:10:42 PDT 2024; root:xnu-10063.101.17~1/RELEASE_ARM64_T6000
Binaries:
  Node: 20.13.0
  npm: 10.5.2
  Yarn: 1.22.18
  pnpm: 9.1.0
Relevant Packages:
  next: 14.0.0
  eslint-config-next: 13.3.0
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.0.4
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Developer Experience

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

No response

[midedickson]

I am experiencing this same issue around the same time that you just opened this issue. It's weird as all my CSS was working perfectly before, but now it seems like one whole section of my application doesn't work, it's weird.

[mrtns]

I'm running in to this issue as well. New tailwind classes only show up after force restarting next dev

[mrtns]

Using next dev --turbo seems to work. I'm on 14.2.3.

[devinpitcher]

Seeing this as well with components in intercepted routes like src/app/(app)/feed/@modal/(..)profile/[username]/post/[slug]/PostDialog.tsx. Closing the modal (the intercepted route), reloading the page, and re-opening the modal will show the proper CSS.

Using Turbo is not an option for me, as I have some dependencies that apparently are incompatible with --turbo.

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.4.0: Fri Mar 15 00:10:42 PDT 2024; root:xnu-10063.101.17~1/RELEASE_ARM64_T6000
  Available memory (MB): 65536
  Available CPU cores: 10
Binaries:
  Node: 20.14.0
  npm: 10.7.0
  Yarn: 1.22.19
  pnpm: 9.4.0
Relevant Packages:
  next: 14.2.4 // Latest available version is detected (14.2.4).
  eslint-config-next: 14.2.4
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.5.2
Next.js Config:
  output: N/A

[MangoMarcus]

Same issue, using turbo does work for me but it's not ideal that something so fundamental should be broken

[giovanniincammicia]

On next 15 RC.0 I managed to make it work with next dev, but not with next dev --turbo.

[nassosyian]

--turbo isn't working for me. I'm onWSL2 which seems to be the cause of the problem, i found a solution here for those who are still searching

[columk1]

Same issue with Next 15 RC.0

Without turbopack HMR works for one or two changes then it stops working. The page is still reloaded but the changes are not included. I have to keep restarting the server. With turbopack it's fine.

[edgarasben]

Same on Next 15 RC.0.

Works fine with "next dev"; however, with the "next dev --turbo", the HMR works only with the main global.css. The changes from other imported CSS files are not applied.

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!