tailwind-design-system

概览

什么是 tailwind-design-system？

tailwind-design-system 是一个实用技能，帮助使用 Tailwind CSS v4 构建可扩展且适合生产环境的设计系统。它侧重于以 CSS 为核心的配置、设计令牌、组件变体、响应式模式以及无障碍支持。该技能面向前端开发者、UI 设计师以及希望标准化界面模式或从 Tailwind v3 迁移到 v4 的团队。

谁适合使用此技能？

• 使用 Tailwind CSS v4 创建组件库的前端团队
• 实现设计令牌和主题定制的开发者
• 构建响应式且无障碍组件的 UI 设计师
• 需要在多个代码库中统一 UI 模式的项目
• 正在从 Tailwind v3 迁移到 v4 的团队

它解决了哪些问题？

• 简化可扩展设计系统的搭建流程
• 提供针对 v4 特性的模式和迁移指导
• 帮助标准化 UI 组件和设计令牌
• 支持无障碍和响应式设计的最佳实践

使用方法

安装步骤

1. 通过以下命令安装 tailwind-design-system：

   npx skills add https://github.com/wshobson/agents --skill tailwind-design-system
   

2. 首先查看 SKILL.md 文件，了解整体工作流程和核心概念。
3. 浏览辅助文件：
   • README.md：通用使用说明
   • AGENTS.md：代理相关指导
   • metadata.json：配置详情
   • references/advanced-patterns.md：Tailwind v4 高级模式

关键文件和文件夹

• SKILL.md：主要工作流程和概览
• references/advanced-patterns.md：高级用法，包括原生 CSS 动画、暗黑模式、自定义工具和迁移技巧
• references/：其他指南和模式

适配您的项目

• 将此技能作为您自己仓库和工具的模板
• 根据您的 UI 需求自定义设计令牌、组件变体和响应式模式
• 参考高级模式实现动画和无障碍功能

示例：Tailwind v4 高级模式

• 学习使用 @starting-style 实现原生 CSS 动画
• 利用 CSS 自定义变体实现暗黑模式
• 使用 React 和 Radix UI 构建无障碍对话框和弹出层

常见问题

tailwind-design-system 是否兼容 Tailwind v3？

不兼容，此技能针对 Tailwind CSS v4 进行了优化。v3 项目请参考官方的升级指南。

使用 tailwind-design-system 的主要优势是什么？

• 加速构建可扩展且一致的 UI 设计系统
• 提供针对 Tailwind v4 的最新模式，包括以 CSS 为核心的主题和响应式设计
• 提供动画、无障碍和暗黑模式的高级示例

哪里可以找到高级用法示例？

请查看 references/advanced-patterns.md 文件，内含详细代码示例和迁移清单。

如何预览所有可用资源？

打开 Files 标签，查看完整文件树，包括嵌套的参考资料和辅助脚本，帮助您理解技能结构并适配您的工作流程。

什么时候不适合使用 tailwind-design-system？

如果您的项目使用其他 CSS 框架，或尚未准备好迁移到 Tailwind v4，此技能可能不适用。它专注于 Tailwind v4 特定的模式和工作流程。