tailwindcss
tailwindcss copied to clipboard
tailwindlabs
[v4] Issue with vite-plugin-vue-devtools and v4 beta.1
What version of Tailwind CSS are you using?
4.0.0-beta.1
What build tool (or framework if it abstracts the build tool) are you using?
Vite 5.4.11
What version of Node.js are you using?
v22.11.0
What browser are you using?
Chrome 131.0.6778.86
What operating system are you using?
Windows 11 24H2
Reproduction URL
StackBlitz Can't run it there though. They don't seem to allow plugins like tailwindcss in vite.config.js
Another way to reproduce is just to npm create vue@latest with vue router and just add TailwindCSS v4 alpha/beta to it and run the dev server.
Describe your issue
When using vue and vue-router, during vite HMR, the vite-plugin-vue-devtools, version 7.6.4, freaks out with this error:
and the page looks like this:
@HummingMind Hey there! I wasn't able to reproduce this locally using the latest main version of Tailwind CSS (but I don't think we made any Vite changes there before the last release 🤔).
Here's the example I tried: https://github.com/philipp-spiess/tailwindcss-playgrounds/tree/main/vue
It's just a npm create vue@latest like you said with Tailwind CSS v4 installed as a Vite extension and the dev server works just fine (tried to make changes in the .vue and .css files).
@philipp-spiess
I did not give out the full information in the origianl post. It's not just a vue@latest with TW4 and Vue Router. But it's also with unplugin-vue-router, which automatically generates the routes, based on file-based routing, instead of manually configuring them.
I was able to reproduce locally, in a clean create-vue project. I'll use that as the new re-production.
@philipp-spiess Ok, the new reproduction is up. The same link in the original post. I was able to download it and reproduce the problem.
When you run the "dev" script, just go into the /pages/index.vue and just add some tailwind classes to the paragraph element to trigger HMR.
Here is what I see in the client console:
Just noticed that in this error:
the path start with /ue-devtools-path and I would think it should be /vue-devtools-path seems like something might be removing the v letter 🤣
If I remove tailwind, when I make css updates, I only see this:
So tailwind seems to be triggering different hot updates.
Just tested by switching from the @tailwindcss/vite to the @tailwindcss/postcss and this issue does not happen with the PostCSS plugin.
So it has something to do with the new tailwindcss vite plugin.
Thank you!
Here is what I see in the devtools with the PostCSS plugin, where everything works:
Oh I wonder if this is the same issue as https://github.com/tailwindlabs/tailwindcss/issues/15159 and has to do with virtual modules not being resolved correctly.
Thanks for putting together the repro!
Still happens with beta.3 🍻 @HummingMind I haven't the problem anymore on beta.6
It's much better on beta.6. You can still see "the jump" on the very first window load (once the browser opens), but HMR works fine after that point, where it did not with beta.3. So this could probably be cosnidered "fixed", if there is no way to improve the initial page load.
Thank you for all the hard work!
The "jump" seems to be Vite dev server itself, not related to TailwindCSS. So, I'll go ahead and clsoe this, as it seems to work fine with beta.6.