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.

[MangoMarcus]

No update for this? I've updated to Next 15 which has broke Turbopack, tried reverting to Webpack but still getting this issue

HMR does reload the styles, but the classes haven't been generated by Tailwind

[634750802]

Same issue with Vercel Deployment. Needs to redeploy without cache.

[AnYiEE]

Next.js 15.1.3 has the same issue, but it works fine when --turbo is enabled.

[strafe]

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

Same issue here, except in my case when it inevitably stops working, if I run next dev without tubo, it works again. Next.js 15

[Badlapje]

Same issue here using nextjs 15.1.6, even with --turbo it doesn't work.

@samcx why was the DX label removed?

[samcx]

@Badlapje The Developer Experience was too generic of a label, so it wasn't helpful!

[samcx]

@felipe-linares is it possible to fix your reproduction?

I am getting this error.

[Error: Invalid interception route: /(..)product/[id]. Cannot use (..) marker at the root level, use (.) instead.]