Tailwind CSS Best Practices

Core Principles

• Prefer utility classes over custom CSS for most styling
• Keep class lists readable by grouping: layout → spacing → typography → color → effects
• Use semantic HTML first; utilities should enhance, not replace structure

Variants & State

• Use hover, focus-visible, disabled, dark, and motion-safe variants where appropriate
• Prefer data-* and aria-* variants for stateful styling tied to DOM semantics
• Use group and peer for parent/sibling state without extra JS

Responsive & Container Queries

• Start with the base styles, then add responsive variants (sm, md, lg, ...)
• Use container query utilities when layout depends on parent size