What problem does it solve? Setting up a consistent design system with Tailwind CSS v4 requires learning its new CSS-first configuration model, which differs significantly from v3's JavaScript config approach. This Skill provides ready-to-use patterns for design tokens, component variants, dark mode, and animations so you avoid trial-and-error with the new syntax. ## Core Features & Use Cases - CSS-First Theme Configuration: Define semantic color tokens, radius scales, and animation keyframes using @theme blocks with OKLCH colors and dark mode overrides via @custom-variant. - Component Patterns: Implement CVA-based buttons, compound card components, accessible form inputs, and responsive grid systems in React 19 without forwardRef. - Advanced v4 Features: Use native CSS animations with @starting-style, custom @utility directives, theme modifiers, namespace overrides, and container queries. - Use Case: When migrating a component library from Tailwind v3 to v4, follow the included migration checklist to replace tailwind.config.ts with @theme blocks and swap tailwindcss-animate for native CSS keyframes. ## Quick Start Ask the AI to set up a Tailwind CSS v4 design system with semantic color tokens, dark mode support, and a button component with variants.
