Tailwind colormix issue

[schillerenrico]

Package

v4.x

Description

I currently have a strange behavior with color-mix. Looking at nuxt ui docs the UDropDown with error colored options has the following css

@supports (color:color-mix(in lab,red,red)) {
    .data-highlighted\:before\:bg-error\/10[data-highlighted]:before {
        background-color: 
 color-mix(in oklab, var(--ui-error) 10%, transparent);
    }
}

But this css is not generated properly in my project. Its just the full red background-color.

.data-highlighted\:before\:bg-error\/10 {
    &[data-highlighted] {
        &::before {
            content: var(--tw-content);
            background-color: var(--ui-error);
        }
    }
}

It was working before but I dont know what update brokes it.
Is it possible to add the dynamic 10% opacity to the &[data-highlighted ?
So its not looking like that while hovering?

[Jericho1060]

I can confirm, I also have the issue.
I have also seen it on the NavigationMenu

As a workaround on the navigation menu, I removed the “before” in the style by rewriting the style in the 'ui' attribute of the component with link: 'data-[active]:bg-primary/10 rounded-md'as I was using link: 'data-[active]:before:bg-primary/10 before:rounded-md' before

For the Dropdown menu, item: 'data-[highlighted]:before:bg-transparent data-[highlighted]:bg-primary/10 rounded-md' seems to work but same color on all items

After some test, it seems only the opacity is the trouble and cannot be applied to the background when using before: as I can still change the color, but the opacity is never applied.

[schillerenrico]

Oh good point. Yeah we could workaround it but the two issues remain.

1. Why is color-mix not working
2. Shouldnt the transparency be applied to the before element when color mix is not supported? Like opacity: 0.1 when bg-error/10

[Jericho1060]

Yeah, the issues remain.
The transparency should be applied.

For me, it appears after a pnpm update command and I didn't see any direct dependency update.
Probably a nested dependency is involved.

Both components with the issue are from Reka UI and a new release was made yesterday. Probably something around it.

I have also seen it's not present when deployed on my test server so it seems to be only in dev mode and not after build...

[benjamincanac]

I also reproduce this in a dev environment, it seems to be caused by latest tailwindcss release: https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.1.15 and probably this PR: tailwindlabs/tailwindcss#19069

You can set a resolution to tailwindcss@4.1.14 to fix this for now.

[RobinMalfait]

Hey! Tailwind CSS maintainer here, this should be solved in the latest Tailwind CSS 4.1.16 release.