TopolearnResponsive prefixes let one set of classes describe the layout for every screen size.
Breakpoint variants apply a utility from a minimum width upwards:
sm:40rem (640px)md:48rem (768px)lg:64rem (1024px)xl:80rem (1280px)2xl:96rem (1536px)
Tailwind is mobile-first: unprefixed classes apply to all sizes, and prefixed ones override from that width up. So text-center sm:text-left is centred on phones and left-aligned from 640px. A common mistake is reaching for sm: to target phones; the unprefixed class already does that.
To target a range, stack a max-* variant: md:max-lg:flex applies only between md and lg. max-md:hidden hides below 768px.
Breakpoints are theme variables. Add or change them in CSS:
@theme { --breakpoint-3xl: 120rem; }which immediately enables 3xl: utilities. One-off breakpoints use arbitrary values such as min-[320px]:text-sm.
The generated media queries use the modern range syntax (@media (width >= 48rem)), in rem, so they respect user font settings.
Good responsive Tailwind usually needs fewer breakpoints than you'd think: flex-wrap, grid-cols-[repeat(auto-fit,minmax(16rem,1fr))] and fluid widths adapt continuously. Use breakpoints for structural changes, like showing the full navigation from md: up.
Example
<nav class="flex items-center justify-between p-4">
<a href="/" class="text-lg font-bold">Acme</a>
<button class="md:hidden" aria-label="Open menu">☰</button> <!-- phones only -->
<div class="hidden gap-6 md:flex"> <!-- md and up -->
<a href="/pricing">Pricing</a><a href="/docs">Docs</a>
</div>
</nav>
<section class="grid grid-cols-1 gap-4 p-4 sm:grid-cols-2 lg:grid-cols-4">
<div class="rounded-lg bg-white p-4 shadow">1</div>
<div class="rounded-lg bg-white p-4 shadow">2</div>
<div class="rounded-lg bg-white p-4 shadow">3</div>
<div class="rounded-lg bg-white p-4 shadow">4</div>
</section>
<h1 class="text-center text-3xl sm:text-left md:max-lg:text-4xl lg:text-5xl">Title</h1>Remember
- Unprefixed = all sizes; sm: md: lg: xl: 2xl: apply from that width up
- Phones are the unprefixed default, not sm:
- Combine with max-*: md:max-lg: for a range
- Add breakpoints with --breakpoint-* in @theme
Watch out for
- Using sm: classes to style mobile; sm: starts at 640px.