tailwind-best-practices

Tailwind Best Practices 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. Scope 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 Priority-Ordered Guidelines Rules are prioritized by impact: Priority Category Impact 1 Component Usage CRITICAL 2 Design Tokens CRITICAL 3 ClassName Usage HIGH 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 ) 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 ) 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/ Rule Categories in references/rules/ component- - Component usage rules (1 rule) tokens- - Design token rules (2 rules) classname-* - ClassName usage rules (2 rules)