Tailwind CSS Architecture

# Tailwind CSS Architecture ## Core Principles - Utility-first: compose styles from utilities. Extract components, not CSS classes. - Never use `@apply` in component files. Only use it in global CSS for base resets. - Use CSS variables for design tokens, not hardcoded values. - Prefer Tailwind's built-in spacing/color scales over arbitrary values. ## Class Ordering Follow this order in className strings: 1. Layout (display, position, overflow) 2. Sizing (width, height, min/max) 3. Spacing (margin, padding, gap) 4. Typography (font, text, leading) 5. Visual (bg, border, shadow, rounded) 6. Interactive (cursor, hover, focus) 7. Animation (transition, animate) ## Responsive Design - Mobile-first: base styles are mobile, layer up with `sm:`, `md:`, `lg:`. - Use `container mx-auto px-4` for page-level containment. - Use CSS Grid (`grid`) for page layouts, Flexbox (`flex`) for component layouts. - Define breakpoints once in config, don't use arbitrary breakpoints. ## Dark Mode - Use `dark:` variant with class strategy. - Semantic color tokens: `text-foreground`, `bg-background`, `border-border`. - Never hardcode colors like `text-gray-900 dark:text-white`. Use tokens. - Test both modes for every component. ## Component Patterns - Use `cn()` (clsx + tailwind-merge) for conditional class merging. - Variant props via `cva()` for multi-variant components. - Avoid deep nesting of Tailwind classes with string interpolation. - Prefer `group` and `peer` modifiers over JavaScript for hover/focus states.