A Tailwind plugin to mix colors with CSS color-mix

[JavierM42]

I recently built the tailwindcss-color-mix plugin to mix colors at runtime.

Live demo

My motivation was generating slightly different shades of colors to standardize hover/focus states, but there may be other use cases, so I tried to keep naming as generic as possible.

Usage

bg-red-500 bg-mix-blue-500 bg-mix-amount-50

How it works

• Standard bg utilities now also set a --tw-bg-base property to the same value they set background-color to.
• The new bg-mix-amount utilities control a --tw-bg-mix-amount property.
• The new bg-mix utilities overwrite the background-color rule with a color-mix(...) call, using var(--tw-bg-base) as the base color and var(--tw-bg--mix-amount) as the mix amount.

[DavidSeptimus-Klotho]

This plugin is neat. It takes a bit of work to make it work correctly with tailwind-merge, but the end result is neat.

I ended up swapping the order bg-mix to mix-bg to deconflict with the standard bg selectors and then extended my tailwind-merge configuration to support the new utilities.

tailwind-merge configuration

import { extendTailwindMerge, fromTheme } from "tailwind-merge"; type AdditionalClassGroupIds = "mix-bg" | "mix-bg-amount" | "mix-bg-method"; type AdditionalThemeGroupIds = never; const arbitraryValueRegex = /^\[(?:([a-z-]+):)?(.+)]$/i; const isArbitraryValue = (value: string) => arbitraryValueRegex.test(value); const colors = fromTheme("colors"); const customTwMerge = extendTailwindMerge< AdditionalClassGroupIds, AdditionalThemeGroupIds >({ extend: { classGroups: { "mix-bg": [colors], "mix-bg-amount": [ { "mix-bg-amount": ["20", "40", "60", "80", isArbitraryValue], }, ], "mix-bg-method": [ "mix-bg-method-shorter-hue", "mix-bg-method-longer-hue", ], }, conflictingClassGroups: { "mix-bg": ["mix-bg"], "mix-bg-amount": ["mix-bg-amount"], "mix-bg-method": ["mix-bg-method"], }, }, }); export { customTwMerge as twMerge };

Before

After

End result

Some much more interesting and varied colors achieved through merging color blends with the weather card's default styles. 🎉