About tailwind-design-system-v4
A skill for developers building design systems with Tailwind CSS v4, covering CSS-first configuration, tokens, component variants, and accessibility. It also includes guidance for v3 migrations.
Key features
- 01CSS-first configuration and tokens
- 02Component variants and responsive patterns
- 03Accessible component design
- 04Dark mode setup
- 05Tailwind v3 migration guidance
Use cases
- 01Creating a component library with Tailwind v4
- 02Setting up project themes and tokens
- 03Building responsive, accessible components
- 04Migrating a Tailwind v3 project to v4
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/tailwind-design-system-v4in Claude Code to confirm it loaded.
Bundled filesPATTERNS.md
Details
From the project READMETailwind 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 |
|---|---|
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 |
CSS setup, component patterns, and migration: PATTERNS.md.
Comments
Markdown supported