A Tailwind plugin to mix colors with CSS color-mix #13085
JavierM42
started this conversation in
Show and tell
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
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
bg
utilities now also set a--tw-bg-base
property to the same value they setbackground-color
to.bg-mix-amount
utilities control a--tw-bg-mix-amount
property.bg-mix
utilities overwrite thebackground-color
rule with acolor-mix(...)
call, usingvar(--tw-bg-base)
as the base color andvar(--tw-bg--mix-amount
) as the mix amount.Beta Was this translation helpful? Give feedback.
All reactions