What problem does it solve? Setting up Tailwind CSS v4 with shadcn/ui breaks easily because v4 replaced config files with CSS-first theming, and outdated v3 patterns cause build failures, missing colors, and broken dark mode. ## Core Features & Use Cases - Four-Step Theme Architecture: Enforces the mandatory pattern of root-level CSS variables, @theme inline mapping, base styles, and automatic dark mode switching. - Error Prevention: Documents 8 known failure modes including tw-animate-css import errors, @apply breaking changes, @layer base cascade issues, and @theme inline dark mode conflicts. - Migration Support: Provides v3-to-v4 migration guidance covering config deletion, plugin syntax changes, OKLCH colors, and removed default element styles. - Use Case: When initializing a new React/Vite project with shadcn/ui, follow the setup checklist to get working semantic colors (bg-primary, text-foreground) with automatic dark mode in minutes instead of debugging cryptic build errors. ## Quick Start Set up Tailwind v4 with shadcn/ui in my React Vite project following the four-step CSS variable architecture.
