Using color-mix() in Tailwind CSS
Plug color-mix() into Tailwind v3/v4 via arbitrary values, theme extensions, or @apply. Shows the recommended patterns for each Tailwind version.
Detailed Explanation
color-mix() and Tailwind
Tailwind ships its own palette, but color-mix() complements it perfectly when you need a runtime-derived color or a one-off mix.
Arbitrary value syntax (Tailwind 3 and 4)
<button class="bg-[color-mix(in_oklch,theme(colors.blue.500),white_20%)]">
Lightened blue
</button>
Important: Tailwind's arbitrary value parser does not allow spaces, so
replace them with underscores (in_oklch). The browser tolerates
underscores between top-level tokens and treats them as whitespace.
Tailwind v4 — @theme integration
Tailwind v4 lets you define your tokens in @theme and use color-mix()
to derive palette steps:
@theme {
--color-brand: #2563eb;
--color-brand-hover: color-mix(in oklch, var(--color-brand), black 12%);
--color-brand-soft: color-mix(in oklch, var(--color-brand) 16%, white);
}
You can now use bg-brand, bg-brand-hover, bg-brand-soft like
any built-in palette step.
@apply with derived colors
.btn {
@apply text-white;
background: var(--color-brand);
}
.btn:hover {
background: color-mix(in oklch, var(--color-brand), black 12%);
}
Pair with the Tailwind converter
Migrating an existing CSS palette to Tailwind tokens? The Tailwind CSS converter shows the nearest-utility for each color, then color-mix() handles any custom derived values.
Use Case
Adding hover-darken or theme-tinted utility classes in Tailwind without explicitly defining every shade in tailwind.config. Particularly useful for design tokens shared with non-Tailwind code.