Repository navigation
[Bug?]: Tailwind CSS v4 outputs & as & which breaks the styles #1749
Description
Duplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior 😯
Tailwind CSS v4 (recently fixed to work with Solid Start) outputs & as & which breaks the styles.
For example, a class using a "dark theme" variant like this:
.dark\:bg-red-500 {
&:where(.dark, .dark *) {
background-color: var(--color-red-500);
}
}This is actually outputted like this:
.dark\:bg-red-500 {
&:where(.dark, .dark *) {
background-color: var(--color-red-500);
}
}Expected behavior 🤔
Outputs & directly.
Steps to reproduce 🕹
See repro: #1748
Context 🔦
It doesn't depend on the vite setup because it also happened with the alternative PostCSS-based setup. Unsure if the issue is on Solid Start's side or Tailwind CSS's side.
Related Tailwind CSS issue: tailwindlabs/tailwindcss#16133
Reacted by irisarco and Robrecht Cannoodt
Activity
DaniGuardiola commentedon Feb 7, 2025
Reading through some of the links here, it seems like a potential solution/workaround would be to have the tailwind vite plugin before the solid start (vinxi?) one. How can this be achieved in Solid Start?
Update: I just tried forcing the ordering to
"pre"(docs), but it doesn't seem to make sense becausetailwind()actually returns a series of plugins that already have this setting. Not sure what else to try.atilafassina commentedon Feb 11, 2025
Since Release 1.1.0 - Gear 5, the template was bumped and Tailwind v4 support was added. Are we able to close this one, @DaniGuardiola / @birkskyum ?
irisarco commentedon Feb 11, 2025
I've encountered the same bug, my case is quite simple:
Placeholder won't be red and this is the generated CSS:
This bug is still present on the new release.
DaniGuardiola commentedon Feb 13, 2025
The vite plugin works fine, this problem doesn't seem to be related to it. I think the example should be updated to the vite plugin, as it's the recommended setup nowadays for Tailwind CSS, likely faster too. Unless there's a blocking problem on Solid Start's end I don't know about. @atilafassina
This issue, on the other hand, happens independently of whether vite or postcss is used for the setup. Would love to see it resolved! I tried to debug but I usually make use of the vite-inspect plugin for these things, however it fails to load with an error when trying to plug it into vinxi, so I'm not sure how I can look into the build pipeline.
mdynnl commentedon Feb 13, 2025
I've posted my findings here in discord thread but haven't had the time to actually fix it.