tailwind-design-system

Tailwind Design System - 构建 Tailwind CSS 设计系统

技能概述

Tailwind Design System 帮助您使用 Tailwind CSS 构建可扩展的设计系统，包括设计令牌、组件变体、响应式模式和无障碍访问支持。

适用场景

1. 创建组件库

当您需要为团队或项目构建一套可复用的 UI 组件时，这个技能可以指导您使用 Tailwind CSS 创建标准化的组件库，确保设计一致性和开发效率。

2. 实现设计令牌和主题

适合需要管理颜色、间距、字体等设计变量的项目，帮助您建立统一的设计令牌系统，并轻松实现暗色模式、品牌主题切换等功能。

3. 标准化 UI 模式

当您的代码库存在样式不一致、重复代码多的问题时，可以使用此技能来标准化 UI 模式，建立统一的设计规范和组件使用方式。

核心功能

1. 设计令牌管理

帮助您创建和管理设计令牌（Design Tokens），包括颜色系统、字体排版、间距规范等，实现设计到代码的统一映射，支持多主题切换。

2. 组件变体系统

指导您构建灵活的组件变体，使用 Tailwind 的 variants 和自定义配置创建可复用的组件模式，提高组件的可维护性和扩展性。

3. 响应式与无障碍设计

提供响应式设计的最佳实践，确保组件在不同设备上都能正常工作，同时集成无障碍访问标准，让您的组件对所有用户都友好。

常见问题

如何开始使用 Tailwind Design System 技能？

使用前请明确您的项目需求和约束条件。技能会帮助您澄清目标、应用相关最佳实践，并提供可执行的步骤和验证方法。如需详细示例，可以参考 implementation-playbook.md 资源文件。

Tailwind 设计系统适合什么类型的项目？

这个技能特别适合中大型项目、需要多团队协作的项目，以及希望统一 UI 规范的团队。如果您正在创建组件库、实现主题系统，或者需要标准化现有项目的样式，都可以使用此技能。

这个技能和其他 CSS 相关技能有什么区别？

Tailwind Design System 专注于使用 Tailwind CSS 构建设计系统。如果您的任务与 Tailwind 设计系统无关，或者需要使用其他 CSS 方案（如 CSS-in-JS、Sass 等），请选择其他更合适的技能。