Tailwind CSS Patterns

Utility-first CSS with Tailwind v3/v4, component variants, and the cn() pattern.

When to Activate

• Composing utilities for layout (flex, grid, spacing, sizing)
• Responsive design with breakpoint prefixes
• Dark mode with dark: variants
• Building component variants with cva (class-variance-authority)
• Deduplicating conflicting classes with tailwind-merge
• Configuring custom colors, fonts, or spacing in tailwind.config
• Animating with transition, animate-*, or custom keyframes

Core Utility Patterns

Spacing and sizing