Resources 实施手册

# Tailwind 设计系统实施手册 本文件包含技能所引用的详细模式、检查清单和代码示例。 # Tailwind 设计系统 使用 Tailwind CSS 构建生产级设计系统，涵盖设计令牌、组件变体、响应式模式及可访问性。 ## 何时使用此技能 - 创建组件库时 - 实现设计令牌和主题化时 - 构建响应式且可访问的组件时 - 在代码库中标准化 UI 模式时 - 迁移到或扩展 Tailwind CSS 时 - 设置深色模式和配色方案时 ## 核心概念 ### 1. 设计令牌层级 品牌令牌 (抽象) └── 语义令牌 (用途) └── 组件令牌 (具体) 示例: blue-500 → primary → button-bg ### 2. 组件架构 基础样式 → 变体 → 尺寸 → 状态 → 覆盖 ## 快速开始 typescript // tailwind.config.ts import type { Config } from 'tailwindcss' const config: Config = { content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'], darkMode: 'class', theme: { extend: { colors: { // 语义颜色令牌 primary: { DEFAULT: 'hsl(var(--primary))', foreground: 'hsl(var(--primary-foreground))', }, secondary: { DEFAULT: 'hsl(var(--secondary))', foreground: 'hsl(var(--secondary-foreground))', }, destructive: { DEFAULT: 'hsl(var(--destructive))', foreground: 'hsl(var(--destructive-foreground))', }, muted: { DEFAULT: 'hsl(var(--muted))', foreground: 'hsl(var(--muted-foreground))', }, accent: { DEFAULT: 'hsl(var(--accent))', foreground: 'hsl(var(--accent-foreground))', }, background: 'hsl(var(--background))', foreground: 'hsl(var(--foreground))', border: 'hsl(var(--border))', ring: 'hsl(var(--ring))', }, borderRadius: { lg: 'var(--radius)', md: 'calc(var(--radius) - 2px)', sm: 'calc(var(--radius) - 4px)', }, }, }, plugins: [require('tailwindcss-animate')], } export default config css /* globals.css */ @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --primary: 222.2 47.4% 11.2%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary