Tailwind CSS Responsive Design

Two independent systems exist : viewport breakpoints (page-level) and container queries (component-level). Use viewport breakpoints to change layout based on the BROWSER size ; use container queries to change layout based on a specific PARENT container's size.

Companion skills :

• tailwind-syntax-utility-classes : the utilities you wrap in responsive prefixes
• tailwind-syntax-variants : the full variant grammar (state, attribute, custom)
• tailwind-core-v3-vs-v4 : the broader v3-to-v4 differences

Quick Reference : Default Viewport Breakpoints

Shared between v3 and v4 :