tailwind-best-practices 是做什么的？
Mastra Playground UI 的 Tailwind CSS 样式指南。在编写、审查或重构 packages/playground-ui 和 packages/playground 中的样式代码时，应使用本技能以确保设计系统一致性。触发涉及 Tailwind 类、组件样式或设计令牌的任务。
核心原则
- 使用实用类优先：优先使用 Tailwind 内置的实用类，而不是自定义 CSS。
- 保持一致性：始终引用主题配置中定义的设计令牌（颜色、间距、字体）。
- 最小化自定义样式：只有在 Tailwind 默认值无法满足需求且无法通过配置扩展时才编写自定义 CSS。
- 提取可复用模式：对于重复出现的样式组合，考虑使用
@apply指令创建组件类。
布局指南
- 使用 Flexbox (
flex) 或 Grid (grid) 进行布局，而不是浮动或定位。 - 使用
gap-*控制网格/弹性项之间的间距。 - 使用
container类或max-w-*设置最大宽度。
// ✅ 推荐：使用 Flexbox 和 gap
<div className="flex items-center gap-4">
<span>项目 1</span>
<span>项目 2</span>
</div>
// ❌ 避免：使用 margin 创建间距
<div className="flex items-center">
<span className="mr-4">项目 1</span>
<span>项目 2</span>
</div>
排版指南
- 使用
text-*类（如text-sm、text-lg）定义字体大小。 - 使用
font-*类（如font-medium、font-bold）定义字重。 - 使用
text-{color}-*类（如text-gray-900、text-primary）设置文本颜色。
// ✅ 推荐：使用排版类
<h2 className="text-xl font-semibold text-gray-900">标题</h2>
// ❌ 避免：内联样式或自定义字体大小
<h2 style={{ fontSize: '20px', fontWeight: 600, color: '#111827' }}>标题</h2>
颜色指南
- 始终使用项目主题中定义的颜色类（例如
bg-primary、text-secondary）。 - 对于交互元素，使用
hover:、focus:和active:变体。
// ✅ 推荐：主题颜色和状态变体
<button className="bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-300">
按钮
</button>
间距指南
- 使用间距比例（如
p-4、m-2）而不是任意值。 - 使用
space-x-*或space-y-*控制子项之间的间距。
响应式设计
- 使用断点前缀（
sm:、md:、lg:、xl:）实现响应式布局。 - 采用移动优先策略：先定义基本样式，再为更大视口添加覆盖。
// ✅ 推荐：响应式网格
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{/* 项目 */}
</div>
自定义组件
当 Tailwind 实用类导致过度重复时，使用 @apply 指令提取模式：
/* components.css */
.btn-primary {
@apply bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded;
}
性能考虑
- 使用
purge或content配置移除未使用的样式。 - 避免使用动态构建的类名（如
text-${color}-500），这可能会被 purge 移除。