tailwind-design-system

CSS-first design system framework for Tailwind v4 with tokens, components, and responsive patterns. 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 . For advanced animation and dark mode patterns, see references/advanced-patterns.md : For advanced v4 CSS patterns, the full v3-to-v4 migration checklist, and complete best practices, see references/advanced-patterns.md : - 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 - Creating a component library with Tailwind v4 - Implementing design tokens and theming with CSS-first configuration - Building responsive and accessible components -...