tailwind-4

What problem does it solve?

Tailwind CSS usage is often inconsistent, forcing teams to reinvent patterns or fight with fragile className logic. This guide consolidates Tailwind 4 patterns and best practices to standardize styling decisions and reduce cognitive load.

Core Features & Use Cases

• Styling Decision Tree: Thumb rules for when to use Tailwind classes, dynamic values, and conditional styling to keep code readable and maintainable.
• Critical Rules: Enforces no var() in className and no hex colors, advocating semantic Tailwind tokens instead.
• The cn() Utility: Promotes using a small helper to safely compose conditional classes.
• Dynamic Values: Guidance on when to use style props or CSS variables for truly dynamic styling.
• Common Patterns: Layout, typography, spacing, borders/shadows, and responsive design patterns with Tailwind utilities.
• Arbitrary Values (Escape Hatch): How to opt into one-off values while avoiding design-system deviations.

Quick Start

Start by adopting the cn() utility for conditional styling and replace direct hex colors with semantic Tailwind tokens, then progressively apply responsive and dark mode patterns across components.