[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