modern-tailwindlisted

# 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