What problem does it solve? Setting up a consistent, scalable design system with Tailwind CSS v4 requires learning new CSS-first configuration patterns, design token hierarchies, and component architecture that differ significantly from v3, leading to inconsistent UI patterns and migration mistakes. ## Core Features & Use Cases - CSS-First Configuration: Define design tokens with @theme, OKLCH semantic colors, radius scales, and animation keyframes directly in CSS instead of tailwind.config.ts. - Component Patterns: Implement CVA-based variant components, compound components for React 19 (no forwardRef), accessible form components with error states, and responsive grid/container systems. - Dark Mode & Animations: Set up class-based dark mode with @custom-variant, native CSS animations with @starting-style, and theme persistence via localStorage. - Use Case: When building a React component library, use this Skill to generate a Button component with variant/size props, a Card compound component, and a complete light/dark theme token set ready for production. ## Quick Start Create a Tailwind v4 design system with semantic color tokens, dark mode support, and a Button component with variants.
