Tailwind CSS

Atomic decision guides for Tailwind CSS v4 (current) and v3. Covers CSS-first configuration, design token mapping, utility patterns, component variant strategies, and integration workflows.

I need to...	Guide
Choose between Tailwind v3 and v4	Tailwind v3 vs v4
Set up Tailwind from scratch	Installation & Integration
Configure a v4 project (CSS-first)	v4 Configuration
Configure a v3 project (JS config)	v3 Configuration
Map design tokens to Tailwind	Design Token Mapping
Look up utility class patterns	Utility Class Reference
Add custom utilities, variants, or animations	Custom Theme Extension
Build responsive layouts and container queries	Responsive Design
Implement dark mode	Dark Mode
Decide when to extract a component class	Component Patterns
Know when @apply is appropriate	@apply Guidance
Manage component variants with TypeScript	Class Variance Authority
Merge Tailwind classes safely at runtime	tailwind-merge & clsx
Connect Figma or Style Dictionary to Tailwind	Design System Integration
Reduce bundle size and build time	Performance Optimization
Know idiomatic Tailwind patterns and anti-patterns	Best Practices
Make components accessible	Accessibility