Tailwind CSS v4 Best Practices

Production-grade Tailwind CSS v4 with a focus on design system thinking, maintainability, and performance.

Core Principles

1. Design Tokens, Not Direct Colors

Use semantic tokens instead of Tailwind's default color palette. This enables theme switching without touching components.

<!-- ❌ Direct colors — breaks when you rebrand -->
<button class="bg-blue-500 text-white hover:bg-blue-600">
<span class="text-red-600">Error</span>

<!-- ✅ Semantic tokens — theme-aware -->
<button class="bg-primary text-primary-foreground hover:bg-primary-hover">
<span class="text-error">Error</span>