Tailwind CSS Patterns

# Tailwind CSS Patterns

## When to Use
Apply when styling any component in a Tailwind CSS project.

## Rules
1. **Utility-first** — compose styles from utilities, extract components only when repeating >3 times.
2. **Mobile-first** — write base styles for mobile, use `sm:`, `md:`, `lg:` for larger breakpoints.
3. **Dark mode via `dark:` prefix** — always provide dark mode variants for colors.
4. **Use CSS variables** for theme tokens that change between modes.
5. **Group related utilities** — layout, spacing, typography, colors, then state variants.

## Code Examples

```tsx
<div className="flex flex-col gap-4 p-4 md:flex-row md:gap-6 md:p-6">
  <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
    Title
  </h2>
  <p className="text-sm text-gray-600 dark:text-gray-400">
    Description text
  </p>
</div>
```

## Anti-Patterns
- Using @apply for everything (defeats utility-first purpose)
- Hardcoding colors instead of using theme tokens
- Not providing dark mode variants
- Using arbitrary values `w-[347px]` when a standard size exists

## Checklist
- [ ] Responsive breakpoints used (mobile-first)
- [ ] Dark mode variants provided
- [ ] No @apply abuse
- [ ] Theme tokens used for colors