名称: 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">标题</h2>
</div>