tailwind-patternslisted

# Tailwind CSS Patterns — v4 + Component System ## Overview Modern Tailwind v4 setup and component patterns: - CSS-first configuration (no tailwind.config.js) - `cn()` utility for conditional classes - CVA (Class Variance Authority) for variants - shadcn/ui architecture - Semantic tokens with dark mode - Accessibility patterns --- ## Hard Rules <HARD-RULES> These rules are NON-NEGOTIABLE. Violating any of them is a bug. - NEVER use `@apply` for CSS abstractions — extract React components instead - NEVER dynamically construct class names (`bg-${color}-500`) — use const maps - NEVER use magic values or overuse arbitrary values (`w-[347px]`) — define tokens in `@theme` - ALWAYS use semantic tokens (`bg-primary`) instead of raw palette colors (`bg-blue-500`) - NEVER remove focus outline without replacement — ALWAYS pair `focus:outline-none` with `focus-visible:ring-2` - ALWAYS use `focus-visible:` instead of `focus:` for ring/outline styles - ALWAYS design mobile-first — unprefixed classes = all screen sizes - ALWAYS use container queries (`@container`) for components, viewport queries (`md:`) for page layout only - ALWAYS use `cn()` for conditional class concatenation — never string interpolation - NEVER install `tailwind.config.js` in v4 projects — use CSS-first `@theme` configuration </HARD-RULES> --- ## Vite + Tailwind v4 Setup ### Installation ```bash pnpm add -D tailwindcss @tailwindcss/vite ``` ### Vite Configuration ```typescript // vite.config.ts import tail