名称: tailwind-design-system 描述: 使用Tailwind CSS实用类创建一致、可扩展的设计系统，包含自定义主题、设计令牌和响应式设计模式。用于构建设计系统、实现自定义主题、创建可重用实用模式、配置Tailwind主题扩展、实现深色模式、构建响应式布局、创建设计令牌、使用任意值或建立一致的间距和排版比例。
Tailwind CSS - 实用优先的样式
何时使用此技能
- 使用Tailwind CSS构建设计系统
- 实现自定义主题和设计令牌
- 创建可重用实用类模式
- 配置Tailwind主题扩展
- 实现浅色和深色模式主题
- 使用Tailwind网格/弹性盒子构建响应式布局
- 创建一致的间距和排版比例
- 使用任意值处理一次性样式
- 实现自定义颜色调色板
- 使用Tailwind构建组件变体
- 创建动画和过渡系统
- 建立跨项目的一致性设计
何时使用此技能
- 使用Tailwind进行样式设计，创建设计系统，响应式布局。
- 当处理相关任务或功能时
- 在需要此类专业知识的开发过程中
使用时机: 使用Tailwind进行样式设计，创建设计系统，响应式布局。
核心模式
<div className="flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
<h2 className="text-xl font-bold">Title</h2>
</div>