[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!

[emmnull]

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.

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 default used elsewhere. 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 oklab, var(--color-sky), var(--color-white));

Would a PR for this be welcome?

Related: #14712

[seancheung]

You could achive with @utility + --modifier

@utility text-tint-* { color: color-mix(in srgb, --value(--color-*, [*]), white calc(--modifier(integer) * 1%)); } @utility text-shade-* { color: color-mix(in srgb, --value(--color-*, [*]), black calc(--modifier(integer) * 1%)); } @utility bg-tint-* { background-color: color-mix( in srgb, --value(--color-*, [*]), white calc(--modifier(integer) * 1%) ); } @utility bg-shade-* { background-color: color-mix( in srgb, --value(--color-*, [*]), black calc(--modifier(integer) * 1%) ); } @utility border-tint-* { border-color: color-mix(in srgb, --value(--color-*, [*]), white calc(--modifier(integer) * 1%)); } @utility border-shade-* { border-color: color-mix(in srgb, --value(--color-*, [*]), black calc(--modifier(integer) * 1%)); }

And use them like:

<a class="text-tint-base-content/10 bg-shade-[#000]/50 border-tint-primary/5">Click me</button>

[thesmartwon]

Is there a way to mix with something besides white/black?

I've written a plugin as a temporary measure, but enumerating every color property is annoying.

[danielcavanagh]

cool start to the idea! i was just wondering how to do this. ta

it's also missing these uses of colour: decoration-* outline-* shadow-* inset-shadow-* ring-* inset-ring-* accent-* caret-* fill-* stroke-*. easy enough to copy-paste this as you need for now but it would be best if it applied generally to all colour-based utilities

[danielcavanagh]

i think defaulting to base colour of white or black would be useful (tint goes from black to white and shade from white to black). eg: bg-tint/25 -> bg-[#404040]

but sadly it seems you can't use a modifier in a utility without also having a * so it has to be like bg-tint-25

@utility text-tint-* { color: color-mix(in oklab, black, white calc(--value(integer) * 1%)); } @utility text-shade-* { color: color-mix(in oklab, white, black calc(--value(integer) * 1%)); } 

[danielcavanagh]

altogether for every use of colour:

@utility text-tint-* { color: color-mix(in oklab, --value(--color-*, [*]), white calc(--modifier(integer) * 1%)); color: color-mix(in oklab, black, white calc(--value(integer) * 1%)); } @utility text-shade-* { color: color-mix(in oklab, --value(--color-*, [*]), black calc(--modifier(integer) * 1%)); color: color-mix(in oklab, white, black calc(--value(integer) * 1%)); } @utility bg-tint-* { background-color: color-mix(in oklab, --value(--color-*, [*]), white calc(--modifier(integer) * 1%)); background-color: color-mix(in oklab, black, white calc(--value(integer) * 1%)); } @utility bg-shade-* { background-color: color-mix(in oklab, --value(--color-*, [*]), black calc(--modifier(integer) * 1%)); background-color: color-mix(in oklab, white, black calc(--value(integer) * 1%)); } @utility border-tint-* { border-color: color-mix(in oklab, --value(--color-*, [*]), white calc(--modifier(integer) * 1%)); border-color: color-mix(in oklab, black, white calc(--value(integer) * 1%)); } @utility border-shade-* { border-color: color-mix(in oklab, --value(--color-*, [*]), black calc(--modifier(integer) * 1%)); border-color: color-mix(in oklab, white, black calc(--value(integer) * 1%)); } @utility decoration-tint-* { text-decoration-color: color-mix(in oklab, --value(--color-*, [*]), white calc(--modifier(integer) * 1%)); text-decoration-color: color-mix(in oklab, black, white calc(--value(integer) * 1%)); } @utility decoration-shade-* { text-decoration-color: color-mix(in oklab, --value(--color-*, [*]), black calc(--modifier(integer) * 1%)); text-decoration-color: color-mix(in oklab, white, black calc(--value(integer) * 1%)); } @utility outline-tint-* { outline-color: color-mix(in oklab, --value(--color-*, [*]), white calc(--modifier(integer) * 1%)); outline-color: color-mix(in oklab, black, white calc(--value(integer) * 1%)); } @utility outline-shade-* { outline-color: color-mix(in oklab, --value(--color-*, [*]), black calc(--modifier(integer) * 1%)); outline-color: color-mix(in oklab, white, black calc(--value(integer) * 1%)); } @utility shadow-tint-* { --tw-shadow-color: color-mix(in oklab, --value(--color-*, [*]), white calc(--modifier(integer) * 1%)); --tw-shadow-color: color-mix(in oklab, black, white calc(--value(integer) * 1%)); } @utility shadow-shade-* { --tw-shadow-color: color-mix(in oklab, --value(--color-*, [*]), black calc(--modifier(integer) * 1%)); --tw-shadow-color: color-mix(in oklab, white, black calc(--value(integer) * 1%)); } @utility inset-shadow-tint-* { --tw-inset-shadow-color: color-mix(in oklab, --value(--color-*, [*]), white calc(--modifier(integer) * 1%)); --tw-inset-shadow-color: color-mix(in oklab, black, white calc(--value(integer) * 1%)); } @utility inset-shadow-shade-* { --tw-inset-shadow-color: color-mix(in oklab, --value(--color-*, [*]), black calc(--modifier(integer) * 1%)); --tw-inset-shadow-color: color-mix(in oklab, white, black calc(--value(integer) * 1%)); } @utility ring-tint-* { --tw-ring-color: color-mix(in oklab, --value(--color-*, [*]), white calc(--modifier(integer) * 1%)); --tw-ring-color: color-mix(in oklab, black, white calc(--value(integer) * 1%)); } @utility ring-shade-* { --tw-ring-color: color-mix(in oklab, --value(--color-*, [*]), black calc(--modifier(integer) * 1%)); --tw-ring-color: color-mix(in oklab, white, black calc(--value(integer) * 1%)); } @utility inset-ring-tint-* { --tw-inset-ring-color: color-mix(in oklab, --value(--color-*, [*]), white calc(--modifier(integer) * 1%)); --tw-inset-ring-color: color-mix(in oklab, black, white calc(--value(integer) * 1%)); } @utility inset-ring-shade-* { --tw-inset-ring-color: color-mix(in oklab, --value(--color-*, [*]), black calc(--modifier(integer) * 1%)); --tw-inset-ring-color: color-mix(in oklab, white, black calc(--value(integer) * 1%)); } @utility accent-tint-* { accent-color: color-mix(in oklab, --value(--color-*, [*]), white calc(--modifier(integer) * 1%)); accent-color: color-mix(in oklab, black, white calc(--value(integer) * 1%)); } @utility accent-shade-* { accent-color: color-mix(in oklab, --value(--color-*, [*]), black calc(--modifier(integer) * 1%)); accent-color: color-mix(in oklab, white, black calc(--value(integer) * 1%)); } @utility caret-tint-* { caret-color: color-mix(in oklab, --value(--color-*, [*]), white calc(--modifier(integer) * 1%)); caret-color: color-mix(in oklab, black, white calc(--value(integer) * 1%)); } @utility caret-shade-* { caret-color: color-mix(in oklab, --value(--color-*, [*]), black calc(--modifier(integer) * 1%)); caret-color: color-mix(in oklab, white, black calc(--value(integer) * 1%)); } @utility fill-tint-* { fill: color-mix(in oklab, --value(--color-*, [*]), white calc(--modifier(integer) * 1%)); fill: color-mix(in oklab, black, white calc(--value(integer) * 1%)); } @utility fill-shade-* { fill: color-mix(in oklab, --value(--color-*, [*]), black calc(--modifier(integer) * 1%)); fill: color-mix(in oklab, white, black calc(--value(integer) * 1%)); } @utility stroke-tint-* { stroke: color-mix(in oklab, --value(--color-*, [*]), white calc(--modifier(integer) * 1%)); stroke: color-mix(in oklab, black, white calc(--value(integer) * 1%)); } @utility stroke-shade-* { stroke: color-mix(in oklab, --value(--color-*, [*]), black calc(--modifier(integer) * 1%)); stroke: color-mix(in oklab, white, black calc(--value(integer) * 1%)); } 

[danielcavanagh]

and tailwind does mixing in oklab for transparency so i guess it's best to use that as the default rather than srgb

[robclancy]

I was looking for just doing the existing mix with transparency to match with black instead of transparent because of daisyui hardcoding that for table borders. Anyway, I think this change could be done for a simple subset of what is wanted with a simple extra /.

So bg-sky-500/20/bg-red-400 to do color-mix(in oklab, thesky 20%, thered))