Back to Details

tailwind-best-practices

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Tailwind Best Practices

Tailwind CSS最佳实践

Overview

概述

Styling guidelines for the Mastra Playground UI, containing 5 rules across 3 categories. Rules are prioritized by impact to guide automated refactoring and code generation. These rules ensure design system consistency, prevent token drift, and maintain component library integrity.
Mastra Playground UI的样式指南，包含3个类别下的5条规则。规则按影响优先级排序，以指导自动化重构和代码生成。这些规则确保设计系统的一致性，防止令牌偏移，并维护组件库的完整性。

Scope

适用范围

  • packages/playground-ui
  • packages/playground
  • packages/playground-ui
  • packages/playground

When to Apply

适用场景

Reference these guidelines when:
  • Writing new React components with Tailwind styles
  • Reviewing code for styling consistency
  • Refactoring existing styled components
  • Adding or modifying UI elements
在以下场景中参考本指南：
  • 编写带有Tailwind样式的新React组件
  • 审查代码以确保样式一致性
  • 重构现有样式化组件
  • 添加或修改UI元素

Priority-Ordered Guidelines

按优先级排序的指南

Rules are prioritized by impact:
PriorityCategoryImpact
1Component UsageCRITICAL
2Design TokensCRITICAL
3ClassName UsageHIGH
规则按影响程度优先级排序：
优先级类别影响级别
1组件使用关键
2设计令牌关键
3ClassName使用高

Quick Reference

快速参考

Critical Patterns (Apply First)

关键模式（优先应用）

Component Usage:
  • Use existing components from 
    @playground-ui/ds/components/
    (
    component-use-existing
    )
  • Never create new components in the 
    ds/
    folder
Design Tokens:
  • Only use tokens from 
    tailwind.config.ts
    in 
    @playground-ui
    (
    tokens-use-existing
    )
  • Never modify design tokens or 
    tailwind.config.ts
    (
    tokens-no-modification
    )
组件使用：
  • 使用
    @playground-ui/ds/components/
    中的现有组件（
    component-use-existing
    ）
  • 切勿在
    ds/
    文件夹中创建新组件
设计令牌：
  • 仅使用
    @playground-ui
    中
    tailwind.config.ts
    里的令牌（
    tokens-use-existing
    ）
  • 切勿修改设计令牌或
    tailwind.config.ts
    （
    tokens-no-modification
    ）

High-Impact Patterns

高影响模式

ClassName Usage:
  • No arbitrary Tailwind values except 
    height
    and 
    width
    (
    classname-no-arbitrary
    )
  • No 
    className
    prop on DS components except 
    h-
    /
    w-
    on 
    DialogContent
    and 
    Popover
    (
    classname-no-ds-override
    )
ClassName使用：
  • 除
    height
    和
    width
    外，禁止使用任意Tailwind值（
    classname-no-arbitrary
    ）
  • 除
    DialogContent
    和
    Popover
    上的
    h-
    /
    w-
    外，DS组件上禁止使用
    className
    属性（
    classname-no-ds-override
    ）

References

参考资料

Full documentation with code examples is available in:
  • references/tailwind-best-practices-reference.md
    - Complete guide with all patterns
  • references/rules/
    - Individual rule files organized by category
To look up a specific pattern, grep the rules directory:
grep -l "component" references/rules/
grep -l "token" references/rules/
grep -l "className" references/rules/
包含代码示例的完整文档可在以下位置获取：
  • references/tailwind-best-practices-reference.md
    - 包含所有模式的完整指南
  • references/rules/
    - 按类别组织的单个规则文件
要查找特定模式，请在rules目录中使用grep命令：
grep -l "component" references/rules/
grep -l "token" references/rules/
grep -l "className" references/rules/

Rule Categories in 
references/rules/

references/rules/
中的规则类别

  • component-*
    - Component usage rules (1 rule)
  • tokens-*
    - Design token rules (2 rules)
  • classname-*
    - ClassName usage rules (2 rules)
  • component-*
    - 组件使用规则（1条）
  • tokens-*
    - 设计令牌规则（2条）
  • classname-*
    - ClassName使用规则（2条）