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

Gradients

Provides two-toned gradient combinations. Requires a direction, such as bg-gradient-to-br (bottom-right).

Primary-Secondary
Secondary-Tertiary
Tertiary-Primary
Secondary-Primary
Tertiary-Secondary
Primary-Tertiary
Success-Warning
Warning-Error
Error-Success
Warning-Success
Error-Warning
Success-Error