Breakpoints & Responsive in Tailwind CSS

From the Tailwind CSS cheat sheet · Responsive Design · verified Jul 2026

Breakpoints & Responsive

Mobile-first responsive design with breakpoint prefixes.

html

<!-- Mobile-first: styles apply from that breakpoint UP -->
<div class="text-sm md:text-base lg:text-lg">
  Responsive text
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  Responsive grid
</div>

<div class="hidden md:block">Only visible on md+</div>
<div class="md:hidden">Only visible on mobile</div>

💡 Tailwind is mobile-first: unprefixed classes apply to all sizes, breakpoints add overrides

⚡ Use max-md: to target screens BELOW a breakpoint — replaces tricky max-width media queries

📌 @container queries (v4) make components responsive to their parent, not the viewport

🟢 Common pattern: flex-col on mobile + md:flex-row on desktop for stack-to-row layouts

responsivebreakpointscontainer-queries

Back to the full Tailwind CSS cheat sheet