# Tailwind Design System

> Use when: implement a design system in Tailwind with tokens, variants, and consistent components.

- Skill: `kimtth/tailwind-design-system` (Agent Skill)
- Install (CLI): `npx skillmds@latest add kimtth/tailwind-design-system`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kimtth/tailwind-design-system/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: kimtth (https://skillmd.com/u/kimtth)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/kimtth/tailwind-design-system

---


Goal: consistent, themeable UI without per-component drift.

Use for:
- standardizing spacing, color, and typography across a project
- building reusable components with controlled variants
- replacing scattered ad hoc classes with a system

Workflow:
1. Define tokens in the theme: color, spacing, radius, type scale.
2. Drive components from tokens, not hard-coded values.
3. Encode variants with a variants helper (e.g. cva).
4. Centralize class composition; merge conflicts predictably.
5. Support theming via CSS variables for light/dark.
6. Document the allowed variants and when to use each.

Patterns:
- semantic token names (bg-surface, text-muted) over raw scales
- variant maps for size/intent/state
- class-merge utility to resolve overrides
- CSS variables for runtime theme switching

Rules:
- no magic numbers; use the spacing and type scale
- keep variants finite and intentional
- avoid duplicating tokens across components
- a new visual value belongs in the theme, not inline