Tailwind Design System (v4)

CSS-first design system framework for Tailwind v4 with tokens, components, and responsive patterns.

- Migrates configuration from tailwind.config.ts to CSS @theme blocks with native CSS variables, OKLCH color spaces, and @custom-variant for dark mode

- Provides production-ready component patterns including CVA-based variants, compound components, form controls, grids, and animations using native @keyframes and @starting-style

- Includes design token hierarchy (brand → semantic → component), responsive utilities like size-* shorthand, and accessibility-first patterns with ARIA attributes and focus states

- Covers v3-to-v4 migration with checklist, custom @utility directives, container queries, and color-mix() for alpha variants

Tailwind Design System (v4)

Build production-ready design systems with Tailwind CSS v4, including CSS-first configuration, design tokens, component variants, responsive patterns, and accessibility.

Note: This skill targets Tailwind CSS v4 (2024+). For v3 projects, refer to the upgrade guide.

When to Use This Skill

- Creating a component library with Tailwind v4

- Implementing design tokens and theming with CSS-first configuration

- Building responsive and accessible components

- Standardizing UI patterns across a codebase

- Migrating from Tailwind v3 to v4

- Setting up dark mode with native CSS features

Key v4 Changes