tailwind-design-system
CSS-first design system framework for Tailwind v4 with tokens, components, and responsive patterns.
- Migrates configuration from
tailwind.config.tsto CSS@themeblocks with native CSS variables, OKLCH color spaces, and@custom-variantfor dark mode - Provides production-ready component patterns including CVA-based variants, compound components, form controls, grids, and animations using native
@keyframesand@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
@utilitydirectives, 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
More in React
vercel-react-best-practices
69 prioritized React performance rules covering waterfalls, bundle size, re-renders, and advanced patterns
vercel-labs/agent-skillsvercel-composition-patterns
Compound components, render props, and context patterns for scalable component APIs
vercel-labs/agent-skillsshadcn
shadcn/ui component usage, customization, and Tailwind integration
shadcn/uiwebapp-testing
Testing React apps: unit, integration, and end-to-end patterns
anthropics/skillstypescript-advanced-types
Discriminated unions, conditional types, template literals, and utility type patterns
wshobson/agents