Prerequisites

• Load the web:css skill for CSS Best Practices.

• Load the web:react skill for React Best Practices.

• Load the web:typescript skill for TypeScript Best Practices.

• load the web:web-design skill for Design Best Practices.

Tailwind Design System

Build production-ready design systems with Tailwind CSS, including design tokens, component variants, responsive patterns, and accessibility.

Quick Reference

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

Resources

• Tailwind CSS Documentation

• CVA Documentation

• shadcn/ui

• Radix Primitives