Tailwind Color Classes Cheat Sheet for Developers
Tailwind color utilities are fast when the palette is consistent. Combine neutral surfaces with one primary action color and semantic status colors.
Useful Tailwind color patterns
<button class="bg-blue-600 text-white hover:bg-blue-700">
Save changes
</button>
<div class="border border-slate-200 bg-white text-slate-900">
Panel content
</div>
<div class="dark:bg-zinc-950 dark:text-zinc-100">
Dark mode area
</div>Developer checklist
- Use one main hue for primary actions.
- Use neutral colors for layout and borders.
- Reserve red, amber and green for real status states.