Tailwind CSS Colors Cheat Sheet for UI Developers
Fast Tailwind color class examples for text, background, border, ring, hover, focus and dark mode.
| Use | Value | Note |
|---|---|---|
| Text | text-slate-900 | Default readable body text. |
| Muted | text-slate-500 | Secondary labels and helper text. |
| Primary | bg-blue-600 text-white | Common primary action button. |
| Border | border-slate-200 | Quiet panel borders. |
| Focus | focus:ring-2 focus:ring-blue-500 | Keyboard-visible focus style. |
Copy snippet
<button class="rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500">
Continue
</button>