tailwind-design-system
Implement Tailwind CSS v4 design systems with CSS-first configuration, design tokens, and component patterns.
Install
npx skills add https://github.com/wshobson/agents --skill tailwind-design-systemStats
| Total installs | 25,109 |
| Weekly installs | 25.0K |
| GitHub stars | 32.4K |
| First seen | Jan 20, 2026 |
| Source | @wshobson/agents |
Summary
- 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
Tags
Related skills
| Skill | Installs | vs tailwind-design-system |
|---|---|---|
| brand-guidelines | 19,130 | -5,979 |
| site-architecture | 15,556 | -9,553 |
| enhance-prompt | 21,059 | -4,050 |
| distill | 30,516 | +5,407 |
| building-native-ui | 22,455 | -2,654 |
FAQ
- How many installs does tailwind-design-system have?
- tailwind-design-system has 25,109 total installs and 25.0K installs this week.
- Where is tailwind-design-system hosted?
- tailwind-design-system is published by @wshobson/agents at https://github.com/wshobson/agents.
- How many GitHub stars does tailwind-design-system have?
- tailwind-design-system has 32.4K GitHub stars.
- When was tailwind-design-system first indexed?
- OrangeBot.AI first indexed tailwind-design-system on Jan 20, 2026.
- How do I install tailwind-design-system?
- Run: npx skills add https://github.com/wshobson/agents --skill tailwind-design-system