Skip to main content
Back to registry

tailwind-design-system

wshobson/agents

Build production-ready design systems with Tailwind CSS v4, including CSS-first configuration, design tokens, component variants, responsive patterns, and accessibility.

Installs18
Install command
npx skills add https://github.com/wshobson/agents --skill tailwind-design-system
Security audits
Gen Agent Trust HubPASS
SocketPASS
SnykPASS
About this skill
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 . Define reusable custom utilities: - 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 - Use @theme blocks - CSS-first configuration is v4's core pattern - Use OKLCH colors - Better perceptual uniformity than HSL - Compose with CVA - Type-safe variants - Use semantic tokens - bg-primary not bg-blue-500 - Use size-* - New shorthand for w-* h-* - Add accessibility - ARIA attributes, focus states - Don't use tailwind.config.ts - Use CSS @theme instead - Don't use @tailwind directives - Use @import "tailwindcss" - Don't use forwardRef - React 19 passes ref as prop - Don't use arbitrary values - Extend @theme instead - Don't hardcode colors - Use semantic tokens - Don't forget dark mode - Test both themes

Source description provided by the upstream skill listing. Community reviews and install context appear in the sections below.

Community Reviews

Latest reviews

Sign in to review

No community reviews yet. Be the first to review.

Browse this skill in context
FAQ
What does tailwind-design-system do?

Build production-ready design systems with Tailwind CSS v4, including CSS-first configuration, design tokens, component variants, responsive patterns, and accessibility.

Is tailwind-design-system good?

tailwind-design-system does not have approved reviews yet, so SkillJury cannot publish a community verdict.

What agent does tailwind-design-system work with?

tailwind-design-system currently lists compatibility with Agent compatibility has not been published yet..

What are alternatives to tailwind-design-system?

Skills in the same category include telegram-bot-builder, flutter-app-size, sharp-edges, iterative-retrieval.

How do I install tailwind-design-system?

npx skills add https://github.com/wshobson/agents --skill tailwind-design-system

Related skills

More from wshobson/agents

Related skills

Alternatives in Software Engineering