Last updated
Tailwind CSS Color System
Tailwind CSS includes a comprehensive color palette with 22 color families,
each with 11 shades from 50 (lightest) to 950 (darkest). The palette is designed
to be perceptually consistent — each step represents a similar visual difference
in lightness. Colors are referenced in utility classes like bg-blue-500,
text-red-700, and border-green-300.
Color Scale Reference
| Shade | Typical Use |
|---|---|
| 50 | Very light backgrounds, hover states on white |
| 100 | Light backgrounds, badges |
| 200 | Borders on light backgrounds |
| 300 | Disabled states, placeholder text |
| 400 | Icons, secondary text |
| 500 | Primary brand color, buttons |
| 600 | Hover state for 500 |
| 700 | Active/pressed state |
| 800 | Dark text on light backgrounds |
| 900 | Very dark text, headings |
| 950 | Near-black, dark mode backgrounds |
Custom Colors in Tailwind Config
JavaScript
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: '#eff6ff',
100: '#dbeafe',
500: '#3b82f6',
600: '#2563eb',
700: '#1d4ed8',
900: '#1e3a8a',
},
// Using CSS variables for dynamic theming
primary: 'rgb(var(--color-primary) / <alpha-value>)',
}
}
}
};