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. 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 @theme and @custom-variant syntax. ## Core Features & Use Cases - CSS-First Theme Configuration: Define semantic color tokens in OKLCH, radius scales, and animation keyframes inside @theme blocks, with class-based dark mode via @custom-variant. - Component Patterns: Implement CVA-based Button variants, compound Card components, accessible form inputs with error states, and responsive Grid/Container layouts using React 19 ref-as-prop conventions. - Advanced v4 Features: Use native @starting-style popover animations, custom @utility directives, color-mix() alpha scales, namespace overrides, and a complete v3-to-v4 migration checklist. - Use Case: When scaffolding a new component library, apply the provided token hierarchy and CVA patterns to produce a themed Button, Card, and form system with dark mode support in one pass. ## Quick Start Ask the AI to set up a Tailwind CSS v4 design system with semantic color tokens, dark mode, and a CVA-based Button component for your React project.
