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 both forward or backward, and shade 500 is considered the default or centerpoint, and does not have a paired value.
<div class="bg-primary-100-900">Forward</div><div class="bg-primary-500">Default</div><div class="bg-primary-900-100">Backward</div>500
Default
Default
400
300
200
100
50
600
700
800
900
950
Forward
Default
Backward
50950
100900
200800
300700
400600
500
600400
700300
800200
900100
95050