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. 🎉