Supports
accent, bg, border, caret, decoration, divide, outline, ring, shadow, stroke, text
Palette
Available to all supported properties and colors via .{property}-{color}-{shade}
<div class="bg-primary-500">...</div>Primary
50
100
200
300
400
500
600
700
800
900
950
Secondary
50
100
200
300
400
500
600
700
800
900
950
Tertiary
50
100
200
300
400
500
600
700
800
900
950
Success
50
100
200
300
400
500
600
700
800
900
950
Warning
50
100
200
300
400
500
600
700
800
900
950
Error
50
100
200
300
400
500
600
700
800
900
950
Surface
50
100
200
300
400
500
600
700
800
900
950
Pairings
Available to all supported properties and colors via .{property}-{color}-{base}-{dark}. Pairings work forward or backward.
<div class="bg-surface-100-900">Skeleton</div>500 (default)
400
300
200
100
50
↔↔↔↔↔
600
700
800
900
950
50↕950
100↕900
200↕800
300↕700
400↕600
500
600↕400
700↕300
800↕200
900↕100
950↕50