企业官网建设流程全解析

name: tailwind-design-system
description: “Build production-ready design systems with Tailwind CSS, including design tokens, component variants, responsive patterns, and accessibility.”
risk: safe
source: community
date_added: “2026-02-27”

Tailwind 设计系统

使用 Tailwind CSS 构建生产级设计系统，包括设计令牌、组件变体、响应式模式和可访问性。

使用此技能的场景

• 使用 Tailwind 创建组件库
• 实现设计令牌和主题化
• 构建响应式和可访问的组件
• 在代码库中标准化 UI 模式
• 迁移到或扩展 Tailwind CSS
• 设置深色模式和配色方案

不要使用此技能的场景

• 任务与 tailwind 设计系统无关
• 您需要此范围之外的其他领域或工具

说明

• 明确目标、约束和所需输入。
• 应用相关最佳实践并验证结果。
• 提供可操作的步骤和验证方法。
• 如果需要详细示例，请打开resources/implementation-playbook.md。

资源

• resources/implementation-playbook.md提供了详细的模式与示例。

局限性

• 仅当任务明确匹配上述范围时才使用此技能。
• 不要将输出视为针对特定环境验证、测试或专家审查的替代品。
• 如果缺少所需输入、权限、安全边界或成功标准，请停下来询问澄清。