You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
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