Colors
Utilities for controlling text color, background color, and gradients.
Text Color
Use text-{color} to set the text color of an element.
| Class | CSS Property |
|---|---|
text-white | color: var(--color-white) |
text-black | color: var(--color-black) |
text-transparent | color: transparent |
text-current | color: currentColor |
text-gray-400 | color: var(--color-gray-400) |
text-gray-500 | color: var(--color-gray-500) |
text-gray-600 | color: var(--color-gray-600) |
text-gray-700 | color: var(--color-gray-700) |
text-gray-800 | color: var(--color-gray-800) |
text-gray-900 | color: var(--color-gray-900) |
text-blue-500 | color: var(--color-blue-500) |
text-blue-600 | color: var(--color-blue-600) |
text-blue-700 | color: var(--color-blue-700) |
text-red-500 | color: var(--color-red-500) |
text-red-600 | color: var(--color-red-600) |
text-green-500 | color: var(--color-green-500) |
text-green-600 | color: var(--color-green-600) |
text-yellow-600 | color: var(--color-yellow-600) |
text-purple-600 | color: var(--color-purple-600) |
Example
gray-500blue-600red-500green-600yellow-600purple-600
<span class="text-blue-600">Blue text</span>
<span class="text-red-500">Red text</span>
<span class="text-green-600">Green text</span>Background Color
Use bg-{color} to set the background color of an element.
| Class | CSS Property |
|---|---|
bg-white | background-color: var(--color-white) |
bg-black | background-color: var(--color-black) |
bg-transparent | background-color: transparent |
bg-gray-50 | background-color: var(--color-gray-50) |
bg-gray-100 | background-color: var(--color-gray-100) |
bg-gray-200 | background-color: var(--color-gray-200) |
bg-gray-800 | background-color: var(--color-gray-800) |
bg-gray-900 | background-color: var(--color-gray-900) |
bg-gray-950 | background-color: var(--color-gray-950) |
bg-blue-50 | background-color: var(--color-blue-50) |
bg-blue-100 | background-color: var(--color-blue-100) |
bg-blue-500 | background-color: var(--color-blue-500) |
bg-blue-600 | background-color: var(--color-blue-600) |
bg-blue-700 | background-color: var(--color-blue-700) |
bg-red-50 | background-color: var(--color-red-50) |
bg-red-500 | background-color: var(--color-red-500) |
bg-green-50 | background-color: var(--color-green-50) |
bg-green-500 | background-color: var(--color-green-500) |
bg-yellow-50 | background-color: var(--color-yellow-50) |
bg-purple-50 | background-color: var(--color-purple-50) |
bg-purple-500 | background-color: var(--color-purple-500) |
Example - Color Swatches
gray-50
gray-200
gray-800
gray-900
blue-50
blue-500
blue-700
red-500
green-500
purple-500
<div class="bg-blue-500 text-white p-4 rounded-lg">
Blue background with white text
</div>Gradients
Combine bg-gradient-to-{direction} with from-{color} and to-{color} to create gradients.
| Class | CSS Property |
|---|---|
bg-gradient-to-r | background-image: linear-gradient(to right, ...) |
bg-gradient-to-br | background-image: linear-gradient(to bottom right, ...) |
from-blue-500 | --gradient-from: var(--color-blue-500) |
from-purple-500 | --gradient-from: var(--color-purple-500) |
to-blue-500 | --gradient-to: var(--color-blue-500) |
to-purple-500 | --gradient-to: var(--color-purple-500) |
to-pink-500 | --gradient-to: var(--color-pink-500) |
to-teal-500 | --gradient-to: var(--color-teal-500) |
Example
Blue to Purple (right)
Purple to Pink (bottom-right)
Blue to Teal (right)
<div class="bg-gradient-to-r from-blue-500 to-purple-500 text-white p-4 rounded-lg">
Gradient background
</div>