With Tailwind v4 HMR not working in server in NuxtJs

[Sourav9063]

issue

Environment

- Operating System: `Linux`
- Node Version:     `v22.14.0`
- Nuxt Version:     `3.15.4`
- CLI Version:      `3.22.2`
- Nitro Version:    `2.10.4`
- Package Manager:  `[email protected]`
- Builder:          `-`
- User Config:      `compatibilityDate`, `devtools`, `css`, `vite`
- Runtime Modules:  `-`
- Build Modules:    `-`

Reproduction

Follow the official tailwind guide https://tailwindcss.com/docs/installation/framework-guides/nuxt

https://stackblitz.com/edit/github-dye83azh?file=my-project%2Fpackage.json

Describe the bug

While following this guide tailwind official guide https://tailwindcss.com/docs/installation/framework-guides/nuxt setting up nuxt project, the client side work fine. But when any changes or any file save on the sever folder it gives error

{
  "statusCode": 404,
  "statusMessage": "Cannot find any path matching /.",
  "stack": []
}

Console

yarn dev
yarn run v1.22.22
$ nuxt dev
Nuxt 3.15.4 with Nitro 2.10.4                                                                         nuxi  5:25:52 PM
                                                                                                            5:25:52 PM
  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose

  ➜ DevTools: press Shift + Alt + D in the browser (v1.7.0)                                                 5:25:54 PM

✔ Vite client built in 25ms                                                                                5:25:54 PM
✔ Vite server built in 393ms                                                                               5:25:55 PM
✔ Nuxt Nitro server built in 484 ms                                                                  nitro 5:25:55 PM
ℹ Vite client warmed up in 2ms                                                                             5:25:55 PM
ℹ Vite server warmed up in 567ms                                                                           5:25:56 PM
ℹ page reload server/api/health.js                                                                         5:26:02 PM
✔ Nuxt Nitro server built in 189 ms                                                                  nitro 5:26:02 PM
✔ Vite server hmr 6 files in 13.597ms

Additional context

No response

Logs

yarn dev
yarn run v1.22.22
$ nuxt dev
Nuxt 3.15.4 with Nitro 2.10.4                                                                         nuxi  5:25:52 PM
                                                                                                            5:25:52 PM
  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose

  ➜ DevTools: press Shift + Alt + D in the browser (v1.7.0)                                                 5:25:54 PM

✔ Vite client built in 25ms                                                                                5:25:54 PM
✔ Vite server built in 393ms                                                                               5:25:55 PM
✔ Nuxt Nitro server built in 484 ms                                                                  nitro 5:25:55 PM
ℹ Vite client warmed up in 2ms                                                                             5:25:55 PM
ℹ Vite server warmed up in 567ms                                                                           5:25:56 PM
ℹ page reload server/api/health.js                                                                         5:26:02 PM
✔ Nuxt Nitro server built in 189 ms                                                                  nitro 5:26:02 PM
✔ Vite server hmr 6 files in 13.597ms

[Sourav9063]

setting

ssr:false;

in nuxt.config.ts fixes the issue. But I want the ssr

[philipp-spiess]

Hey! I have downloaded your reproduction but I don't see the issue. What am I missing? 🤔

https://github.com/user-attachments/assets/6a55989f-b301-494d-ad8d-60de07457e60

One thing I noticed in your Stackblitz repro is that you were adding tailwind and not tailwindcss. tailwind is unfortunately not our npm name but since you got the client changes to work fine I suppose this is only a typo in the repro?

[Sourav9063]

Hey! I have downloaded your reproduction but I don't see the issue. What am I missing? 🤔

Screen.Recording.2025-02-25.at.13.27.28.mov One thing I noticed in your Stackblitz repro is that you were adding tailwind and not tailwindcss. tailwind is unfortunately not our npm name but since you got the client changes to work fine I suppose this is only a typo in the repro?

I've fixed the typo in Stackblitz. The issue occured in Linux. But I also could not reproduce the issue in Windows 11. I will try again with Linux Ubuntu and update you Thanks a lot

[Alexandre-cibot]

I'm also getting the same issue. Following the official tailwind guid to use tailwind with nuxt allowed me to work in dev environement. But it doesn't work well when deployed. I need to set srr to false to make it work. But setting ssr to false is not a solution for me

[Sourav9063]

Hey! I have downloaded your reproduction but I don't see the issue. What am I missing? 🤔

Screen.Recording.2025-02-25.at.13.27.28.mov One thing I noticed in your Stackblitz repro is that you were adding tailwind and not tailwindcss. tailwind is unfortunately not our npm name but since you got the client changes to work fine I suppose this is only a typo in the repro?

Hey! I have downloaded your reproduction but I don't see the issue. What am I missing? 🤔 Screen.Recording.2025-02-25.at.13.27.28.mov One thing I noticed in your Stackblitz repro is that you were adding tailwind and not tailwindcss. tailwind is unfortunately not our npm name but since you got the client changes to work fine I suppose this is only a typo in the repro?

I've fixed the typo in Stackblitz. The issue occured in Linux. But I also could not reproduce the issue in Windows 11. I will try again with Linux Ubuntu and update you Thanks a lot

Yes The issue is occuring in linux system. Tried both Chrome and Firefox. VsCode and VsCodium With official vue extension and without The issue persists.

[philipp-spiess]

The repro you shared works for me even if I do pnpm build and pnpm preview without having to change the ssr flag to false.

I even set up a Linux VM just to test this and set up a new project based on the README. All I did in addition was to add that server/api/health.js file and it works fine including reloads in dev mode. Here's a video of me using that:

https://github.com/user-attachments/assets/70e0f500-cb58-419e-9c10-2480498d8052

Can you please let me know the exact steps you did to see this error message? Otherwise I have to close this issue since we aren't able to reproduce this I'm afraid.

[Sourav9063]

Maybe this error is related. This error shows when the ssr:false is set in nuxt.config.ts

[12:30:33 PM]  ERROR  [unhandledRejection] write EPIPE

    at afterWriteDispatched (node:internal/stream_base_commons:159:15)
    at writeGeneric (node:internal/stream_base_commons:150:3)
    at Socket._writeGeneric (node:net:971:11)
    at Socket._write (node:net:983:8)
    at writeOrBuffer (node:internal/streams/writable:572:12)
    at _write (node:internal/streams/writable:501:10)
    at Writable.write (node:internal/streams/writable:510:10)
    at Socket.ondata (node:internal/streams/readable:1009:22)
    at Socket.emit (node:events:518:28)
    at addChunk (node:internal/streams/readable:561:12)

[philipp-spiess]

@Sourav9063 I need help here with how to reproduce this error. Can you please line out every step you are doing to get this running? I tried changing the ssr flag on my Linux setup and it's still working as expected.

Were you able to reproduce this in the stackblitz setup you created? If so, what are the comments you run?

[Sourav9063]

@philipp-spiess I downloaded the stackblitz setup yarn install yard dev then the issue is shown in this video

https://github.com/user-attachments/assets/476fc086-9756-45fb-96a7-34fa98bd7492

[samsam8882]

Same.

When type npm run generate, the and run npx serve .output/public, it showns 404.

The steps i exactly followed the the nuxt framework-guides, and created a simple page.

<template>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</template>

Thank you.

[Sourav9063]

Same.

When type npm run generate, the and run npx serve .output/public, it showns 404.

The steps i exactly followed the the nuxt framework-guides, and created a simple page.

<template>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</template>

Thank you.

npm run generate

will create a dist/ directory (not in .output/public) with everything inside ready to be deployed on a static hosting service. This Is Not Related to This Issue.

[adydetra]

What Linux are you using? Can you explain more specifically? Maybe you could also send neofetch here. @philipp-spiess