Responsive Design Patterns

Mobile-first responsive layout guide for React/Next.js/Tailwind. Apply whenever a layout must work across viewport sizes.

Core Rule

Write base styles for the smallest screen, then layer up with min-width queries. Never design desktop-first and shrink down — that compounds complexity.

Breakpoints (Tailwind defaults)