[v4] Issue with vite-plugin-vue-devtools and v4 beta.1

[HummingMind]

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:

[philipp-spiess]

@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).

[HummingMind]

@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.

[HummingMind]

@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: