Tailwind 4.1.8 + vite in vue not hot reloading classes

[Cafezinho]

Tailwind classes do not apply style when hot reloading classes that were not being used before. Need to restart dev server for the styles to apply. I have already tried disabling purge altogether but still did not work. Tried different tailwind v4 versions as well, neither worked. I am using tailwind classes with prefix tw.

Downgraded to v3 to test it out and hot reload works wonders. But my prefix setup to work in conflict with vuetify is wrapped along v4, so I upgraded back. Would be nice to have Hot reload.

What version of Tailwind CSS are you using?

v4.1.8

What build tool (or framework if it abstracts the build tool) are you using?

Vue 2.7, Vite 4.5.0, tailwindcss/vite: 4.1.8

What version of Node.js are you using? v16.20

What browser are you using?

For example: Chrome, Safari, or N/A

What operating system are you using?

For example: macOS, Windows

Reproduction URL

A Tailwind Play link or public GitHub repo that includes a minimal reproduction of the bug. Please do not link to your actual project, what we need instead is a minimal reproduction in a fresh project without any unnecessary code. This means it doesn't matter if your real project is private/confidential, since we want a link to a separate, isolated reproduction anyways.

A reproduction is required when filing an issue — any issue opened without a reproduction will be closed and you'll be asked to create a new issue that includes a reproduction. We're a small team and we can't keep up with the volume of issues we receive if we need to reproduce each issue from scratch ourselves.

Describe your issue

Describe the problem you're seeing, any important steps to reproduce and what behavior you expect instead.

[wongjn]

Please consider providing a public GitHub repo that includes a minimal reproduction of the unexpected behavior.

[IsaacSomething]

I not sure if this is connected, but i am experiencing the same issue with angular + vite + tailwind. I created a post in the angalar cli with a minimal reproduction in stackbliz

https://github.com/angular/angular-cli/issues/30434

[PrzemekTk]

I'm facing the same...

npm create vite@latest with: vue + typescript and then make steps from https://tailwindcss.com/docs/installation/using-vite

None of tailwind classes working

[mattremmel]

I'm able to reproduce the same thing in a project for work. Utility classes don't seem to hot reload if they haven't been used before, but if I restart storybook, the utility classes that weren't previously working, will then display correctly.

I'm not able to link to this project directly because its internal, but I will try to make a reproducible example in a separate repo tomorrow.

Vite: 6.0.0 Tailwindcss: 4.1.10 Storybook: 9.0.9

---

edit: Currently having issues making a reproducible example based off of npm create vite@latest

[nathan-de-pachtere]

Same issue with that config :

"vue": "^3.5.17",
"@vitejs/plugin-vue": "^5.2.3",

"vite": "^6.3.5",
"@tailwindcss/vite": "^4.1.10",
"tailwindcss": "^4.1.10"

[okpedro]

Just wondering if you guys are using a network drive for your project as that was the cause for myself. As soon as I take the project out of the Samba drive and put it into a local Windows directory, the issue goes away. Hot reload works with everything except Tailwind for me under that specific context.

[dlouvard]

Same issue "devDependencies": { "@tailwindcss/vite": "^4.1.11", "autoprefixer": "^10.4.21", "axios": "^1.10.0", "concurrently": "^9.2.0", "laravel-vite-plugin": "^1.3.0", "pinia": "^3.0.3", "prettier": "^3.6.2", "prettier-plugin-tailwindcss": "^0.6.13", "tailwindcss": "^4.1.11", "vite": "^6.0.11", "vue-router": "^4.5.1" }, "dependencies": { "@vitejs/plugin-vue": "^5.2.4", "@vuepic/vue-datepicker": "^11.0.2", "datatables.net-dt": "^2.3.2", "datatables.net-vue3": "^3.0.4", "tippy.js": "^6.3.7", "vue": "^3.5.17", "vue-multiselect": "^3.2.0" },

I fallback to 4.0.3 to be ok

[gccornejo441]

How are you going to push out an new version and have it fail on a widely use dev build vite + react.
Nevermind. restarted vscode and it works now

[nast791]

Same issue, rolled back to version 4.0.9

[robertmylne]

Same here

[thecrypticace]

Gonna close this as a reproduction was not provided. Trying to create a reproduction ourselves from the information in an issue drastically increases the amount of time it takes for us to provide a solution and if we have do that for every issue it’s impossible for us to keep up.

If this is still an issue for you, please open a new issue but include a proper reproduction — a GitHub repository where you already have everything all set up so we can clone it and immediately see the issue without configuring everything by hand.

Sorry, not trying to be dismissive and definitely want to fix the issue if there is one, but we have to be strict about this one or there's no way we could keep up with the number of questions we get and the quality of the library would suffer as a result. Hope that's understandable!