Tailwind CSS patterns and conventions for frontend apps. Use when writing component styles, layouts, or working with CSS classes.

Tailwind CSS Best Practices Styling patterns and conventions for frontend applications. Contains 10 rules covering layout utilities, affordances, color schemes, responsive design, and className handling. When to Apply Reference these guidelines when: Writing component styles with Tailwind Creating layouts (stacks, grids, centering) Handling responsive design Working with color schemes Merging className props Rules Summary Layout Utilities (CRITICAL) layout stack utilities @rules/layout stack utilities.md Use custom stack utilities instead of flex classes. Available utilities: v stack Vertical stack (flex column) h stack Horizontal stack (flex row) v stack reverse Reversed vertical stack h stack reverse Reversed horizontal stack z stack Overlapping stack (grid based, centers children on top of each other) center Center content both horizontally and vertically spacer Flexible spacer that fills available space circle Perfect circle with aspect ratio 1/1 layout prefer gaps @rules/layout prefer gaps.md Use gap on parents instead of child margins. layout responsive stacks @rules/layout responsive stacks.md Switch layout direction at breakpoints. Color Schemes (CRITICAL) color schemes @rules/color schemes.md Use class based color schemes with a custom dark variant. className Handling (CRITICAL) classname cn utility @rules/classname cn utility.md Always use cn() to merge classNames in components. classname prop types @rules/classname prop types.md Use proper types for className props. Affordances (HIGH) affordance classes @rules/affordance classes.md Define element agnostic visual patterns that compose with utilities. Responsive Design (MEDIUM) responsive breakpoints @rules/responsive breakpoints.md Use responsive prefixes with Tailwind defaults. responsive text @rules/responsive text.md Scale text responsively. responsive capabilities @rules/responsive capabilities.md Design for input capabilities (pointer/hover) instead of device labels. Anti Patterns Don't Do flex flex col v stack flex flex row h stack flex items center justify center center bg gray 100 bg neutral 100 bg [ hex] Use design tokens className="..." without cn() cn("...", className) Inline style for responsive Tailwind prefixes Key Files File Purpose tailwind.config.js Config, custom utilities, colors app/styles/global.css Color scheme CSS variables app/styles/tailwind.css Additional utilities app/utils/cn.ts className merge utility

frontend-tailwind-best-practices