Tailwind CSS Colors: Complete Palette Guide (2026)
Tailwind CSS has revolutionized how developers approach colors in web design. With its comprehensive color palette and utility-first approach, you can build beautiful interfaces faster than ever.
All Tailwind CSS Default Colors
Tailwind CSS v3.0+ includes 22 color families, each with 10 shades (50, 100, 200, 300, 400, 500, 600, 700, 800, 900).
Color Families:
Understanding Color Shades
Each Tailwind color comes in 10 shades:
Adding Custom Colors
```javascript
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'brand': {
50: '#eff6ff',
500: '#3b82f6',
900: '#1e3a8a',
}
}
}
}
}
```
Opacity Modifiers
Tailwind 3.0 introduced opacity modifiers using the slash syntax:
```html
```
Best Practices
1. Use semantic color names
2. Limit your palette to 2-3 primary colors
3. Use opacity for layering
4. Don't use arbitrary values everywhere
5. Always check accessibility
Conclusion
Tailwind CSS's color system is powerful and flexible. With 220+ default colors, custom color support, and opacity modifiers, you have everything you need to build beautiful, accessible interfaces.