Tailwind

Variants

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

Source Page Source

Usage

Implement using .variant-[style]-[color]. Automatically applies an accessible text or SVG fill color.

html
<div class="variant-filled-primary">primary</div>

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