styling

# 样式与自定义 有关主题、CSS 变量及添加自定义颜色的信息，请参阅 [customization.md](../customization.md)。 ## 目录 - 语义化颜色 - 优先使用内置变体 - className 仅用于布局 - 禁用 space-x-* / space-y-* - 相等时优先使用 size-* 而非 w-* h-* - 优先使用 truncate 简写 - 禁止手动覆盖 dark: 颜色 - 使用 cn() 处理条件类名 - 覆盖组件禁止手动设置 z-index --- ## 语义化颜色 **错误示例：** tsx **正确示例：** tsx --- ## 状态/指示器禁止使用原始颜色值 对于正面、负面或状态指示器，请使用 Badge 变体、语义化 Token（如 `text-destructive`）或定义自定义 CSS 变量——不要直接使用 Tailwind 的原始颜色。 **错误示例：** tsx +20.1% Active -3.2% **正确示例：** tsx +20.1% Active -3.2% 如果需要一个语义化 Token 中不存在的成功/正面颜色，请使用 Badge 变体或咨询用户是否需要在主题中添加自定义 CSS 变量（参见 [customization.md](../customization.md)）。 --- ## 优先使用内置变体 **错误示例：** tsx Click me **正确示例：** tsx Click me --- ## className 仅用于布局 使用 `className` 进行布局（例如 `max-w-md`, `mx-auto`, `mt-4`），**不要**用于覆盖组件颜色或排版。若要更改颜色，请使用语义化 Token、内置变体或 CSS 变量。 **错误示例：** tsx Dashboard **正确示例：** tsx Dashboard 自定义组件外观时，请按以下顺序选择方案： 1. **内置变体** — `variant="outline"`, `variant="destructive"` 等。 2. **语义化颜色 Token** — `bg-primary`, `text-muted-foreground`。 3. **CSS 变量** — 在全局 CSS 文件中定义自定义颜色（参见 [customization.md](../customization.md)）。 --- #