CSS HMR errors from Tailwind arbitrary value classes

[miosenpai]

Environment

------------------------------
- Operating System: Linux
- Node Version:     v18.18.0
- Nuxt Version:     3.11.1
- CLI Version:      3.11.1
- Nitro Version:    2.9.4
- Package Manager:  npm@10.2.3
- Builder:          -
- User Config:      devtools, modules, tailwindcss
- Runtime Modules:  @nuxtjs/tailwindcss@6.11.4
- Build Modules:    -
------------------------------

Reproduction

https://stackblitz.com/edit/github-4um3z1-gdby4j

Describe the bug

When an arbitrary value Tailwind class with whitespace is used (e.g. font-['Times_New_Roman']), CSS HMR will throw an error on subsequent hard refreshes.

I had originally reported this issue in nuxt-modules/tailwindcss#815, but @ineshbose later discovered the HMR error occurs even with a manual Tailwind CSS setup (without the module), leading me to forward the issue here. Both of us also suspect this could be a Vite bug, but I have not been able to reproduce the issue in a plain Vite project (e.g. npm create vue@latest).

Error Repro:

1. Open the reproduction project above.
2. Edit @/assets/custom.css (e.g. change color: aqua; to color: magenta;), then save the file.
3. Hard refresh the page, an error similar to what's below will be thrown.

ERROR  Internal server error: Parse error /home/projects/github-4um3z1/node_modules/tailwindcss/tailwind.css?direct:489:32                                 7:22:34 PM
      at parse$e (/home/projects/github-4um3z1/node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:16225:355)
      at handleModuleSoftInvalidation (/home/projects/github-4um3z1/node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:53757:27)
      at async getCachedTransformResult (/home/projects/github-4um3z1/node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:53562:10)
      at async doTransform (/home/projects/github-4um3z1/node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:53535:24)
      at async viteTransformMiddleware (/home/projects/github-4um3z1/node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:63458:32)

Additional context

There are some workarounds documented in nuxt-modules/tailwindcss#815 (comment) that might be helpful in deducing what's actually causing this issue.

Logs

No response

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• github-4um3z1-gdby4j (Open reproduction)

[luc122c]

Instead of importing the CSS file in the app script, why not include it in the CSS field in nuxt.config? It seems to resolve the issue: https://stackblitz.com/edit/github-4um3z1-ych9wt?file=nuxt.config.ts

[miosenpai]

Instead of importing the CSS file in the app script, why not include it in the CSS field in nuxt.config? It seems to resolve the issue: https://stackblitz.com/edit/github-4um3z1-ych9wt?file=nuxt.config.ts

Yes I'm aware of this approach (as discussed by the Tailwind module's developer), but the behavior when CSS is imported in app.vue seems like a bug so I've reported it as such.

[danielroe]

Super-quickly looked at this and could not reproduce with the following Vue SSR template: https://stackblitz.com/edit/github-e9jfew?file=src%2FApp.vue,src%2Fpages%2FHome.vue,src%2Fcustom.css - in case it's helpful for someone picking this up later.

[hecktarzuli]

We get these same errors, but without hard refreshes during HMR. Doing a hard refresh actually fixes it for us until something is saved again. What's really weird is this even happens when you're just saving a small change to a composable! We too have Tailwind manually installed.