tailwind-design-system
Installation
SKILL.md
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 migration checklist in
.claude/skills/tailwind-design-system/advanced-v4.md.
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 |