AgentSkillsCN

tailwind

在使用 Tailwind CSS 构建设计系统或组件库时——涵盖设计令牌、CVA 模式以及暗黑模式的实现与应用。

SKILL.md
--- frontmatter
name: tailwind
description: WHEN building design systems or component libraries with Tailwind CSS; covers design tokens, CVA patterns and dark mode.

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

TopicGuide
Tailwind config, global CSS, tokenssetup.md
CVA pattern with type-safe variantscva-components.md
Animation utilities and Dialoganimations.md
Utility functions (cn, focusRing)utilities.md
Do's and Don'ts for maintainabilitybest-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

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

Example:
    blue-500 → primary → button-bg

Component Architecture

code
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?

code
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

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

Resources