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 misconfigurations and inconsistent styling. ## Core Features & Use Cases - CSS-first theming with @theme: Define semantic color tokens in OKLCH, radius scales, and animation keyframes directly in CSS, including dark mode overrides via @custom-variant. - Component patterns: Implement CVA-based variant components (Button, Card, Input, Grid) with React 19 ref-as-prop conventions and accessible form handling. - Advanced v4 capabilities: Use @utility custom utilities, @theme inline/static modifiers, color-mix() alpha scales, container queries, and native popover animations with @starting-style. - Use Case: When migrating a React 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.
