Tailwind CSS best practices

Use when building or reviewing UI styled with Tailwind CSS.

Mental model

• Tailwind is a utility-first styling system, not just a pile of short class names.
• Treat Tailwind as a way to encode a design system in code through tokens, spacing, typography, color roles, and reusable composition patterns.
• Optimize for readability and consistency, not just for “fewer CSS files”.

Utility usage

• Compose utilities around a clear layout and design system intention rather than stacking classes until the UI happens to look right.
• Prefer semantic consistency in spacing, sizing, radii, and typography over one-off values that solve only the local component.
• Use arbitrary values sparingly; repeated arbitrary values usually mean a missing design token or reusable utility.

Tokens and theme