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