tailwind-best-practices

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. Reference these guidelines when: Rules are prioritized by impact: Component Usage: Design Tokens: ClassName Usage: Full documentation with code examples is available in: To look up a specific pattern, grep the rules directory: - packages/playground-ui - packages/playground - Writing new React components with Tailwind styles - Reviewing code for styling consistency - Refactoring existing styled components - Adding or modifying UI elements - Use existing components from @playground-ui/ds/components/ ( component-use-existing ) - Never create new components in the ds/ folder - Only use tokens from tailwind.config.ts in @playground-ui ( tokens-use-existing ) - Never modify design tokens or tailwind.config.ts ( tokens-no-modification ) - 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/tailwind-best-practices-reference.md - Complete guide with all patterns - references/rules/ - Individual rule files organized by category - component-* - Component usage...