Tailwind

Variants

Canned styles available to easily customize elements, components, and more.

Source Page Source

Available via .variant-[style]-[color]. Applies the appropriate text/fill "on" color automatically.

Filled

primary
secondary
tertiary
success
warning
error
surface

Ghost

primary
secondary
tertiary
success
warning
error
surface

Soft

primary
secondary
tertiary
success
warning
error
surface

Ringed

primary
secondary
tertiary
success
warning
error
surface

Glass

Adds a frosted glass style effect. Perfect for overlapping busy or animated backgrounds.

primary
secondary
tertiary
success
warning
error
surface