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.