[Bug?]: Tailwind CSS v4 outputs & as & which breaks the styles

[DaniGuardiola]

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

[DaniGuardiola]

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 because tailwind() actually returns a series of plugins that already have this setting. Not sure what else to try.

[atilafassina]

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]

I've encountered the same bug, my case is quite simple:

<input class="placeholder:text-red-500" placeholder="I should be red" />

Placeholder won't be red and this is the generated CSS:

.placeholder\:text-red-500 {
  &::placeholder {
    color: var(--color-red-500);
  }
}

This bug is still present on the new release.

[DaniGuardiola]

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]

I've posted my findings here in discord thread but haven't had the time to actually fix it.