Tailwind Design System (v4)

Build production design systems on Tailwind CSS v4 using @theme, OKLCH color spaces, semantic tokens, and class-variance-authority (CVA) for component variants.

When to Use

• Greenfield Tailwind v4 theme setup
• Migrating tailwind.config.js (v3) to CSS-first v4 @theme
• Defining semantic color/spacing/typography tokens
• Implementing dark mode via CSS variables
• Structuring button, badge, input variants with CVA

Authority Hierarchy

1. Existing project tokens and patterns
2. User explicit instructions
3. This skill's defaults