[v4] color-mix utilities

[stefanprobst]

usecase: i would love to have an easy way with tailwind to add a semitransparent overlay to an element (which has a solid background color) on hover/press/etc interactions.

something like:

<button class="bg-sky-600 hover:mix-black/10">Click me</button>

currently i am adding an ::after pseudo-element, but since tailwind v4 has added support for css color-mix() i was wondering if the team has any plans to add dedicated color-mix utilities, which would make usecases like the above a bit easier?

thanks!

[emmbm]

This feature would be great, however maybe the syntax would need to account for a few things:

• It should explicitly target specific properties since the concept doesn't only apply to backgrounds
• It should maybe support percentage values for both colors (p1 and p2)
• It should avoid confusion with the alpha modifier syntax

For example, what would happen in this case:

<!-- is the mix applied to bg or to text color ? -->
<button class="bg-sky-600 text-slate-50 hover:mix-black/10">Click me</button>

Or, with an alternate syntax:

<!-- Are the color modifiers used as alpha values or mix percentages ? -->
<button class="bg-sky-600 text-slate-50 hover:bg-sky-600/75-mix-black/10">Click me</button>

[thesmartwon]

is the mix applied to bg or to text color ?

I proposed a syntax below that addresses what the mix is applied to via a prefix (i.e. bg-mix-black instead of mix-black).

Are the color modifiers used as alpha values or mix percentages ?

I think the -600 syntax should use alpha values and the /10 syntax should use percentages. This matches how v4 works today. Examples:

<a class="bg-sky-600/10 bg-mix-slate-100/75">Click me</button>

background-color: color-mix(in srgb, var(--color-sky-600) 10%, var(--color-slate-100) 75%);

and

<a class="bg-sky/20 bg-mix-slate/75">Click me</button>

background-color: color-mix(in srgb, var(--color-sky) 20%, var(--color-slate) 75%);

[thesmartwon]

The color-mix plugin in #13085 is broken in v4 because it can no longer capture bg-* tags to add a CSS variable for later use in background-color.

I briefly tried working around the issue, but sadly found that default plugins cannot be extended or overriden. As far as I can tell, creating functional plugins like bg-* is not currently possible without the plugin API getting new features.

As such, I think there should be a native syntax for colors like this:

<a class="bg-mix-in/srgb bg-sky/10 bg-mix-white/30">asdf</a>

background-color: color-mix(in srgb, var(--color-sky) 10%, var(--color-white) 30%);

The default color space should match the oklch used for linear gradients. The syntax allows for any values as the percentages of the 2 colors. That means this minimal example is also valid:

<a class="bg-sky bg-mix-white">asdf</a>

background-color: color-mix(in oklch, var(--color-sky), var(--color-white));

Would a PR for this be welcome?

Related: #14712