Repository navigation
[Bug?]: @tailwindcss/vite v4 breaking after dev server restart #1693
Description
Current behavior 😯
In tailwind 4, which is still only in beta (but it would be good to fix this before they hit stable), there are now two ways to install tailwind.
- Traditional: Using a Postcss plugin - works as expected
- New: Using a Vite plugin (works in astro, but dev server struggle in solid-start)
The vite plugin works as expected when making a prod build, and for the dev server on a clean reload, but if the dev server is restart in solid-start, the style will be broken. To get it working again, it will be necessary to do either of the following:
- delete
node_modules/.vinxiand then restart dev server - modify/re-save
./src/app.css- triggering this file reload is enough to make it work again
With Astro (v5), there are no issues with restarting the dev server using @tailwindcss/vite with Solid.
With TanStack Start (vinxi 0.4.3/0.5.1), there are no issues either.
Expected behavior 🤔
I expected the tailwind plugin to load correctly on dev server restart.
Steps to reproduce 🕹
There's a repo here with multiple implementations:
https://github.com/birkskyum/tailwind-vite-repro
- Astro with Vite plugin (and solid) - working
- TanStack Start with Vite plugin (and vinxi) - working
- Solid Start with Postcss plugin - working
- Solid Start with Vite plugin - breaking after dev server restart
I can reproduce this issue with vinxi 0.4.3 / 0.5.0 / 0.5.1 and overrides with vite 5/6
The working output looks like this:
The broken output will look like this:
Context 🔦
No response
Your environment 🌎
No response
Activity
[-][Bug?]: @tailwindcss/vite (still beta) breaking on dev server after reload[/-][+][Bug?]: @tailwindcss/vite (still beta) breaking after dev server restart[/+][-][Bug?]: @tailwindcss/vite (still beta) breaking after dev server restart[/-][+][Bug?]: @tailwindcss/vite (v4 beta) breaking after dev server restart[/+]atilafassina commentedon Dec 20, 2024
I'm not sure I followed all the way.
So Tanstack Start is on Vinxi 0.5.1 and Vite 5 -- and that works, right?
And we're on Vinxi 0.5.1 and Vite 6 -- which doesn't work.
Is that the takeaway? Should we pin down Vite to 5 would the issue goes away for us as well?
birkskyum commentedon Dec 20, 2024
No, the takeaway here isn't related to vite/vinxi versions - i see same behavior across versions
The takeaway is that tailwindcss v4 doesn't work when installed through the vite plugin in solid-start, but it does work in astro (indicating the tailwind vite plugin is working) and it does work in tanstack start (indicating it might even be a solid-start rather than a vinxi problem)
[-][Bug?]: @tailwindcss/vite (v4 beta) breaking after dev server restart[/-][+][Bug?]: @tailwindcss/vite v4 breaking after dev server restart[/+]birkskyum commentedon Jan 25, 2025
Tailwind 4 is has been stable released:
https://tailwindcss.com/blog/tailwindcss-v4
So we better make sure it works with SolidStart
birkskyum commentedon Jan 31, 2025
Upstream ticket
mdynnl commentedon Jan 31, 2025
Should be fixed by tailwindlabs/tailwindcss#16052
DaniGuardiola commentedon Jan 31, 2025
I can confirm this bug is fixed, I upgraded the example to v4 (with the nightly temporarily) and it works: #1747
However, there's a different problem now: #1749