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
| v3 Pattern | v4 Pattern |
|---|
More from wshobson/agents
typescript-advanced-types
Master TypeScript's advanced type system including generics, conditional types, mapped types, template literals, and utility types for building type-safe applications. Use when implementing complex type logic, creating reusable type utilities, or ensuring compile-time type safety in TypeScript projects.
40.4Knodejs-backend-patterns
Build production-ready Node.js backend services with Express/Fastify, implementing middleware patterns, error handling, authentication, database integration, and API design best practices. Use when creating Node.js servers, REST APIs, GraphQL backends, or microservices architectures.
31.8Kpython-performance-optimization
Profile and optimize Python code using cProfile, memory profilers, and performance best practices. Use when debugging slow Python code, optimizing bottlenecks, or improving application performance.
22.0Kapi-design-principles
Master REST and GraphQL API design principles to build intuitive, scalable, and maintainable APIs that delight developers. Use when designing new APIs, reviewing API specifications, or establishing API design standards.
20.3Kpython-testing-patterns
Implement comprehensive testing strategies with pytest, fixtures, mocking, and test-driven development. Use when writing Python tests, setting up test suites, or implementing testing best practices.
19.7Kcode-review-excellence
Master effective code review practices to provide constructive feedback, catch bugs early, and foster knowledge sharing while maintaining team morale. Use when reviewing pull requests, establishing review standards, or mentoring developers.
17.2K
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/skills