```
### Dark Mode
```tsx
// tailwind.config.ts: darkMode: 'class'
// Root layout:
// Components use dark: prefix:
```
### cn() utility (merge classes)
```typescript
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
// twMerge handles conflicting classes: cn('p-4', 'p-6') → 'p-6'
```
## Common Patterns
```tsx
// Loading skeleton
// Badge
Active
// Input with error state
// Modal overlay
{/* Modal content */}
```
## Rules
- Mobile-first: style for mobile (no prefix), then override for larger screens
- Use `cn()` from clsx + tailwind-merge to compose dynamic classes
- Extract repeated class combos to reusable components — not @apply
- Use CSS variables for design tokens (colors, radius) for easy theming
- Avoid arbitrary values [w-123px] — use the design system scale
- `gap-` not `space-x/y-` for flex/grid layouts (more predictable)
- Dark mode via `dark:` prefix + class strategy (not media query)
- Use `@tailwindcss/forms` for better default form styling