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

Theming & Customization

• •Extend the theme in tailwind.config instead of ad-hoc custom classes
• •Use @layer for custom utilities/components when repetition is unavoidable
• •Avoid @apply except for small, repeatable patterns

Maintainability

• •Extract reusable UI into components instead of repeating large class strings
• •Keep class names deterministic; avoid dynamic string concatenation when possible