Colors
These colors are applicable to text, backgrounds, borders, and outlines usage examples can be found at the bottom of the page.
White
Black
Gray
100
200
300
400
500
600
700
800
900
Red
100
200
300
400
500
600
700
800
900
Orange
100
200
300
400
500
600
700
800
900
Yellow
100
200
300
400
500
600
700
800
900
Green
100
200
300
400
500
600
700
800
900
Teal
100
200
300
400
500
600
700
800
900
Cyan
100
200
300
400
500
600
700
800
900
Sky
100
200
300
400
500
600
700
800
900
Blue
100
200
300
400
500
600
700
800
900
Indigo
100
200
300
400
500
600
700
800
900
Violet
100
200
300
400
500
600
700
800
900
Purple
100
200
300
400
500
600
700
800
900
Fuchsia
100
200
300
400
500
600
700
800
900
Pink
100
200
300
400
500
600
700
800
900
Usage
The way to apply the classes are as follows:
- text-color-n
- bg-color-n
- border-color-n
- outline-color-n
The only exceptions being white and black which are merely {property}-color. "text-white" for example.
eg.
<div class="bg-blue-300">
<h1 class="text-white">My fancy title</h1>
<h2 class="text-gray-200">My fancy subtitle</h2>
</div>
The color of any of these items can be changed in hover, focus or active states. Simply append the state you'd like to modify using a colon. for example:
<h1 class="hover:text-sky-300">I'm turning blue.</h1>