Define custom Tailwind breakpoints as name:pixel pairs — visualized to scale, exported as v4 –breakpoint-* variables, a v3 screens config, or raw media queries.
Generated locally in your browser — your colors, settings and code never leave this page.
Breakpoints where YOUR layout breaks
Device-name breakpoints age badly; the durable ones come from your content — resize until the design fails, mark the width. Enter them as name:pixel pairs and get the to-scale visualization plus all three output dialects: v4 –breakpoint-* variables, a v3 screens config (with the extend-vs-replace decision handled), and raw media queries for documentation.
Worked example (v4)
@theme {
--breakpoint-compact: 600px;
--breakpoint-medium: 900px;
--breakpoint-expanded: 1240px;
}
<div class="hidden expanded:block">…</div>The replace-vs-extend footgun
- In v3, defining screens REPLACES the defaults — sm:/md:/lg: vanish unless re-declared, breaking every existing responsive class. The extend option adds instead; the tool defaults safely and explains both.
Mobile-first, restated
- Each variant applies from its min-width UP — unprefixed utilities are the mobile styles. Designing desktop-down? Tailwind also generates max-* variants for every breakpoint you define.
Limitations
- Range and container-query variants are per-use decisions in markup, outside a config generator’s scope.
How to use the Tailwind Breakpoint Generator
- List breakpoints as name:pixels, one per line or comma-separated.
- Check the to-scale bars for sanity.
- Export as v4 –breakpoint-* variables, v3 screens config, or raw media queries.
Frequently asked questions
What do custom breakpoints give me?
Named variants: defining content:900 creates content:flex, content:hidden and every other utility at that width — your layout's real inflection points instead of generic device sizes.
Replace or extend the defaults?
Replacing removes sm/md/lg/xl unless re-declared — a classic footgun. The extend option (v3) adds yours alongside the defaults; in v4, @theme values merge with defaults unless you reset the namespace.
Where should breakpoints come from?
From where YOUR layout breaks, not from device lists: resize until the design fails, set a breakpoint there. Tailwind's mobile-first min-width model means each one applies from its width upward.
