Responsive Design With Breakpoints
Use sm, md, lg and xl prefixes to change styles by screen width.
Syntax
class="text-base md:text-2xl"Tailwind is mobile-first. An unprefixed utility applies to every size. A prefixed utility applies from that breakpoint up.
| Prefix | Min width |
|---|---|
sm: | 640px |
md: | 768px |
lg: | 1024px |
xl: | 1280px |
Resize the preview: the box below is stacked on small screens and turns cyan and wider from md up.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer stacks a two-column layout vertically on mobile by defaulting to flex-col and switching to flex-row at the md breakpoint.
- A hero section enlarges its heading from text-2xl on phones to text-5xl on desktop using responsive text size prefixes.
- A sidebar is hidden on small screens with hidden and revealed on large screens with lg:block without writing any media queries.
More examples
Mobile-first column layout
flex-col stacks elements vertically on mobile; md:flex-row switches to a side-by-side layout at the medium (768 px) breakpoint.
<div class="flex flex-col md:flex-row gap-6">
<aside class="w-full md:w-64">Sidebar</aside>
<main class="flex-1">Main content</main>
</div>Responsive typography
The heading grows through four sizes as the viewport widens, with each breakpoint prefix adding styles on top of the previous.
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold">
Responsive Heading
</h1>Show/hide by breakpoint
hidden hides the desktop nav on small screens; lg:flex reveals it on large screens, while the menu button disappears at the same breakpoint.
<nav class="hidden lg:flex items-center gap-6">
<a href="/about">About</a>
<a href="/pricing">Pricing</a>
</nav>
<button class="lg:hidden">Menu</button>
Discussion