modern-tailwind

What problem does it solve?

Build clean, scalable UI styles by embracing Tailwind CSS utilities over heavy custom CSS.

Core Features & Use Cases

• 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
• 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
• Start with base styles, then add responsive variants (sm, md, lg, ...)
• Use container query utilities when layout depends on parent size
• 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
• Extract reusable UI into components instead of repeating large class strings
• Keep class names deterministic; avoid dynamic string concatenation when possible

Quick Start

Start by identifying a common component pattern and implement it with utility classes, then extract reusable tokens into Tailwind themes and layers.