You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I'm not sure if this bug should be addressed in Nuxt or this module itself so I thought I would start the bug report here (I was not able to reproduce this bug with npm create vue@latest so the problem is likely from Nuxt or this module).
Install this module, and use an arbitrary value Tailwind class with whitespace somewhere in the project.
Create and import a custom CSS file (in the repro, this is @/assets/custom.css) to trigger CSS HMRs.
Edit the custom CSS file (e.g. change color: aqua; to color: magenta;) and save it.
Hard refresh the page.
What is Expected?
No error should appear.
What is actually happening?
The following error is 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)
The text was updated successfully, but these errors were encountered:
Thanks for opening and reporting an issue on this repository. Sorry it took me a while to get to this.
I tried this without the module on a vanilla installation of Tailwind CSS as well, and the issue seems to be persisting (so it's likely not the module); I wouldn't say it's Nuxt core either, but possibly something with Vite.
For now, I can tell you these workarounds:
The @/assets/custom.css can be added to css in your Nuxt config.
Put the arbitrary classes away from <template> but rather in <script> (as we understand this seems to be some parsing error) like so:
Apologies for this issue - let me see what I can do from my end, meanwhile if you'd like to report on Nuxt/Vite repositories, please feel free to do so!
Version
@nuxtjs/tailwindcss: 6.11.4
nuxt: 3.10.3
Reproduction Link
https://stackblitz.com/edit/github-4um3z1
Steps to reproduce
I'm not sure if this bug should be addressed in Nuxt or this module itself so I thought I would start the bug report here (I was not able to reproduce this bug with
npm create vue@latest
so the problem is likely from Nuxt or this module).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.@/assets/custom.css
) to trigger CSS HMRs.color: aqua;
tocolor: magenta;
) and save it.What is Expected?
No error should appear.
What is actually happening?
The following error is thrown.
The text was updated successfully, but these errors were encountered: