Tailwind Design System
Standardize Tailwind CSS v4 tokens, variants, and accessible components when spinning up or scaling a solo builder UI.
Overview
Tailwind Design System is an agent skill for the Build phase that helps you implement Tailwind CSS v4 design tokens, component libraries, and accessible responsive UI patterns.
Install
npx skills add https://github.com/wshobson/agents --skill tailwind-design-systemWhat is this skill?
- Tailwind CSS v4 CSS-first config with `@import "tailwindcss"` and `@theme` instead of `tailwind.config.ts`
- Design tokens, component variants, responsive layouts, and accessibility patterns for production UIs
- v3→v4 migration guidance and dark mode via `@custom-variant dark`
- Covers component-library creation, theming, and standardizing patterns across a repo
- Targets Tailwind CSS v4 (2024+)
- Maps v3 vs v4 patterns in a comparison table
Adoption & trust: 45.9k installs on skills.sh; 36.5k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your agent-built UI drifts because every screen invents its own Tailwind patterns and you lack a v4-native token and component system.
Who is it for?
Solo builders shipping React or HTML UIs who want Tailwind v4 tokens and components instead of ad-hoc class strings.
Skip if: Teams that only need a one-off page tweak with no library or migration to v4.
When should I use this skill?
Creating component libraries, implementing design systems, standardizing UI patterns, migrating v3→v4, or setting up dark mode with Tailwind v4.
What do I get? / Deliverables
You get a documented v4 design system with shared tokens, variants, and patterns you can reuse across pages and repos.
- CSS-first theme and token setup
- Component variant patterns
- Responsive and accessibility conventions
Recommended Skills
Journey fit
How it compares
A structured design-system workflow for Tailwind v4, not a generic CSS linter or a component marketplace.
Common Questions / FAQ
Who is tailwind-design-system for?
Indie and solo developers building web apps or content sites who standardize UI with Tailwind CSS v4 and reusable components.
When should I use tailwind-design-system?
During Build (frontend) when creating a component library, defining `@theme` tokens, standardizing patterns, setting up dark mode, or migrating from Tailwind v3.
Is tailwind-design-system safe to install?
Review the Security Audits panel on this Prism page before installing; the skill mainly guides CSS and component structure rather than calling external APIs.
SKILL.md
READMESKILL.md - Tailwind Design System
# 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](https://tailwindcss.com/docs/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 | | ------------------------------------- | --------------------------------------------------------------------- | | `tailwind.config.ts` | `@theme` in CSS | | `@tailwind base/components/utilities` | `@import "tailwindcss"` | | `darkMode: "class"` | `@custom-variant dark (&:where(.dark, .dark *))` | | `theme.extend.colors` | `@theme { --color-*: value }` | | `require("tailwindcss-animate")` | CSS `@keyframes` in `@theme` + `@starting-style` for entry animations | ## Quick Start ```css /* app.css - Tailwind v4 CSS-first configuration */ @import "tailwindcss"; /* Define your theme with @theme */ @theme { /* Semantic color tokens using OKLCH for better color perception */ --color-background: oklch(100% 0 0); --color-foreground: oklch(14.5% 0.025 264); --color-primary: oklch(14.5% 0.025 264); --color-primary-foreground: oklch(98% 0.01 264); --color-secondary: oklch(96% 0.01 264); --color-secondary-foreground: oklch(14.5% 0.025 264); --color-muted: oklch(96% 0.01 264); --color-muted-foreground: oklch(46% 0.02 264); --color-accent: oklch(96% 0.01 264); --color-accent-foreground: oklch(14.5% 0.025 264); --color-destructive: oklch(53% 0.22 27); --color-destructive-foreground: oklch(98% 0.01 264); --color-border: oklch(91% 0.01 264); --color-ring: oklch(14.5% 0.025 264); --color-card: oklch(100% 0 0); --color-card-foreground: oklch(14.5% 0.025 264); /* Ring offset for focus states */ --color-ring-offset: oklch(100% 0 0); /* Radius tokens */ --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; /* Animation tokens - keyframes inside @theme are output when referenced by --animate-* variables */ --animate-fade-in: fade-in 0.2s ease-out; --animate-fade-out: fade-out 0.2s ease-in; --animate-slide-in: slide-in 0.3s ease-out; --animate-slide-out: slide-out 0.3s ease-in; @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes slide-in { from { transform: translateY(-0.5rem); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes slide-out { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-0.5rem); opacity: 0; } } } /* Dark mode variant - use @custom-variant for class-based dark mode */ @custom-variant dark (&:where(.dark, .dark *)); /* Dark mode theme overrides */ .dark { --color-background: oklch(14.5% 0.025 264); --color-foreground: oklch(98% 0.01 264); --color-primary: oklch(98% 0.01 264); --