Topic	Guide
Tailwind config, global CSS, tokens	setup.md
CVA pattern with type-safe variants	cva-components.md
Animation utilities and Dialog	animations.md
Utility functions (cn, focusRing)	utilities.md
Do's and Don'ts for maintainability	best-practices.md

When to Use This Skill

Creating a component library with Tailwind
Implementing design tokens and theming
Building responsive and accessible components
Standardizing UI patterns across a codebase
Migrating to or extending Tailwind CSS

Core Concepts

Design Token Hierarchy

Brand Tokens (abstract)
    └── Semantic Tokens (purpose)
        └── Component Tokens (specific)

Example:
    blue-500 → primary → button-bg

Component Architecture

Base styles → Variants → Sizes → States → Overrides

When to Use Each Guide

Setup

Use setup.md when you need:

Initial Tailwind configuration
CSS variable setup for theming
Design token structure
Global styles foundation

CVA Components

Use cva-components.md when you need:

Type-safe component variants
Button, Badge, or similar components
Standardized variant APIs
Reusable component patterns

Animations

Use animations.md when you need:

Entry/exit animations
Dialog or modal transitions
Tailwind CSS Animate utilities
State-based animations

Utilities

Use utilities.md when you need:

Class name composition (cn function)
Common utility patterns
Focus ring, disabled state helpers

Best Practices

Use best-practices.md for:

Guidance on semantic naming
Do's and Don'ts
Accessibility requirements
Performance considerations

Quick Decision Trees

Where should colors be defined?

Is this a one-off color?
├── Yes → Use arbitrary value sparingly (e.g., bg-[#abc123])
└── No → Is it semantic (primary, destructive)?
    ├── Yes → Add to semantic tokens in setup.md
    └── No → Is it a brand color?
        ├── Yes → Add to theme.extend.colors
        └── No → Use existing Tailwind color

Installation

# Required packages
yarn add tailwindcss postcss autoprefixer
yarn add class-variance-authority clsx tailwind-merge
yarn add tailwindcss-animate

When to Use This Skill

Core Concepts

Design Token Hierarchy

Component Architecture

When to Use Each Guide

Setup

CVA Components

Animations

Utilities

Best Practices

Quick Decision Trees

Where should colors be defined?

Installation

Resources

tailwind

Prerequisites

Tailwind Design System

Quick Reference