[tailwindcss/vite@4.1.15] Color regression in dev

[madmoizo]

What version of Tailwind CSS are you using?

4.1.15

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

Vite 7.1.11

What version of Node.js are you using?

Bun 1.3.0

What browser are you using?

N/A

What operating system are you using?

Windows

Reproduction URL

https://play.tailwindcss.com/nuCpVvYcjM

The reproduction is irrelevant, it happens only in dev.

Describe your issue

tailwindcss/vite 4.1.15 introduced a regression in dev regarding color opacity support.

[wongjn]

Testing the Play in Chrome and Firefox both produce the expected result of a translucent backdrop:

Chrome 141	Firefox 144

And in a Vite project (Vite 7.1.11, Tailwind 4.1.15, Bun 1.3.0):

Chrome 141	Firefox 144

Also devtools shows different to what you see:

Could it be only devtools showing strangeness or is the color showing as opaque in any browsers? Does the Play reproduce the issue for you or only Vite? If only Vite, please consider providing a git repo that reproduces the problem.

[ReiKoka]

I am having the same issue.

https://stackblitz.com/edit/vitejs-vite-slkmf723?file=src%2FApp.tsx

here is the stackblitz with the custom variables.

Here is how the old version used to look

And here is the new version and the issue it is causing without me not even touching the code at all cuz this was a finished section

and the issue is replicated in the stackblitz. Keep in mind I am using customVariables which i have declared in css.

[ReiKoka]

Btw this seems to be more of an issue in dev mode. My packages in the branch of the posted project i am working on things are behaving just fine, in dev mode it is where the issue is happening. Whats even more weird is that bg-info/7 works on background but not on hover of the before element. idk if it is vite or tailwind screwing smth up here but please guys fix it

[wongjn]

Thank you for that reproduction @ReiKoka. I think I've sussed this out.

This regression seems to be due to #19069 when applied to a pseudo element like ::before or ::after.

Minimal reproduction Tailwind Play.

For pseudo-elements, this kind of CSS is generated in 4.1.15:

.before\:bg-foo\/20 {
  &::before {
    content: var(--tw-content);
    background-color: var(--color-foo);
    @supports (color: color-mix(in lab, red, red)) {
      & {
        background-color: color-mix(in oklab, var(--color-foo) 20%, transparent);
      }
    }
  }
}

Notice how the signature is:

.classname {
  &::before {
    & {

It seems browsers don't like the & inside ::before and thus disregards it.

Compare this to v4.1.14:

.before\:bg-foo\/20 {
  &::before {
    content: var(--tw-content);
    background-color: var(--color-foo);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-foo) 20%, transparent);
    }
  }
}

Notice how the signature is:

.classname {
  &::before {

No & inside so everything works as expected.

This is then exacerbated when using a CSS variable, since we get as the fallback:

background-color: var(--color-foo);

Which has no opacity applied. Whereas using a resolvable theme token, like built-ins:

.before\:bg-red-500\/20 {
  &::before {
    content: var(--tw-content);
    background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      & {
        background-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
      }
    }
  }
}

We still get the opacity:

background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 20%, transparent);

But perhaps more subtle difference since it's in the sRGB color space.

This problem doesn't appear in prod since Lightning CSS flattens everything out for us:

.before\:bg-foo\/20:before {
  content: var(--tw-content);
  background-color: var(--color-foo);
}

@supports (color: color-mix(in lab, red, red)) {
  .before\:bg-foo\/20:before {
    background-color: color-mix(in oklab, var(--color-foo) 20%, transparent);
  }
}

[ReiKoka]

@wongjn Thank you for the explanation. I also saw that in the browser but I didn't have any idea why that was happening so this is cool to know. I also checked the package on the prod and the one I have now in dev and it was exactly the same. Didnt realize lightning css was doing the trick behind the scenes for production so thats good to know and learn why this was happening. However my most important question, can we expect a solution come for this in the next few days? Cuz we obviously can't write smth and wait to see how will look in production?

[philipp-spiess]

@wongjn Thanks for this research!! This is super helpful! @RobinMalfait is looking int reverting this and getting a fix out!

[RobinMalfait]

Hey! This should be solved in the latest Tailwind CSS 4.1.16 release.

[ReiKoka]

@RobinMalfait The issue has been fixed. Thank you!