tailwind-best-practices

Tailwind 最佳实践

概述

Mastra Playground UI 样式的路由与优先级指南，包含 3 个类别下的 5 条规则。规则文件中包含详细的说明、示例和审查指引，用于确保设计系统的一致性、防止设计令牌漂移，并维护组件库的完整性。

适用范围

• packages/playground-ui
• packages/playground

何时应用

在以下情况下参考这些指南：

• 编写使用 Tailwind 样式的新 React 组件
• 审查代码的样式一致性
• 重构已有的样式组件
• 添加或修改 UI 元素

按优先级排列的指南

规则按影响程度排定优先级：

优先级	类别	影响
1	组件使用	CRITICAL
2	设计令牌	CRITICAL
3	ClassName 用法	HIGH

快速参考

关键模式（优先应用）

组件使用：

• 使用 @playground-ui/ds/components/ 中的现有组件（component-use-existing）
• 切勿在 ds/ 文件夹中创建新组件

设计令牌：

• 在 @playground-ui 中仅使用 tailwind.config.ts 中的令牌（tokens-use-existing）
• 切勿修改设计令牌或 tailwind.config.ts（tokens-no-modification）

高影响模式

ClassName 用法：

• 除 height 和 width 外，不使用任意 Tailwind 值（classname-no-arbitrary）
• 在 DS 组件上不使用 className 属性，但 DialogContent 和 Popover 上的 h-/w- 除外（classname-no-ds-override）

参考资料

规则文件是详细指南和示例的权威来源：

• references/tailwind-best-practices-reference.md - 包含类别顺序和规则文件路径的规则目录
• references/rules/ - 按类别组织的独立规则文件

仅在实现或审查特定样式规则时加载相关规则文件。使用目录来选择合适的规则，无需加载所有示例。

要查找特定模式，请在规则目录中进行搜索：

grep -l "component" references/rules/
grep -l "token" references/rules/
grep -l "className" references/rules/

references/rules/ 中的规则类别

• component-* - 组件使用规则（1 条规则）
• tokens-* - 设计令牌规则（2 条规则）
• classname-* - ClassName 用法规则（2 条规则）