Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.

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](https://tailwindcss.com/docs/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 v3 Pattern v4 Pattern tailwind.config.ts @theme in CSS @tailwind base/components/utilities @import "tailwindcss" darkMode: "class" @custom variant dark (&:where(.dark, .dark )) theme.extend.colors @theme { color : value } require("tailwindcss animate") CSS @keyframes in @theme + @starting style for entry animations Quick Start Core Concepts 1. Design Token Hierarchy 2. Component Architecture Detailed patterns and worked examples Detailed pattern documentation lives in references/details.md . Read that file when the navigation tier above is insufficient.

tailwind-design-system