AgentSkillsCN

tailwind-design-system

采用 Tailwind CSS 与设计令牌，构建可扩展的 UI 设计系统与组件库。适用于统一样式设定与主题管理时使用此技能。

SKILL.md
--- frontmatter
name: tailwind-design-system
description: Scalable UI design systems and component libraries using Tailwind CSS and design tokens. Use this skill for consistent styling and theme management.

Tailwind Design System

Guidelines for building a consistent, scalable design system using Tailwind CSS and utility-first principles.

Core Principles

  • •Utility-First: Build components using atomic styles for maximum speed and consistency.
  • •Design Tokens: Centralize colors, spacing, and typography in tailwind.config.js.
  • •Mobile-First: Always build for mobile first using the md:, lg:, etc., breakpoints.

Best Practices

  • •Component Extraction: Use the @apply directive sparingly; prefer component composition in React.
  • •Dynamic Classes: Avoid string interpolation for class names; use full class names for purge compatibility.
  • •Arbitrary Values: Use [] for one-off values while maintaining the design system's discipline.

Usage

  • •Reference when implementing new UI designs or landing pages.
  • •Use for refactoring "messy" CSS into clean Tailwind utilities.
  • •Apply when debugging responsive layout issues or theme inconsistencies.