Tailwind Breakpoint Checker: What Breakpoint Am I In?
Tailwind Breakpoint Checker. Resize your window or enter a width in this Tailwind breakpoint checker to see which breakpoint you're in. A quick pass through the color gamut checker catches issues before they become real problems.
Interactive Tool
Active Breakpoint
All Breakpoints
Utility Class Example
Tailwind Breakpoint Checker reads your current browser viewport width and tells you which of Tailwind's five default breakpoints — sm, md, lg, xl, or 2xl — it currently falls into. Resize your window and watch the active prefix update live, alongside a full list of every breakpoint's pixel threshold and a copyable utility-class example for the range you're in right now. Handy the moment you're staring at a broken layout and need to know which Tailwind prefix actually applies to what you're seeing.
Resize your browser window and this Tailwind breakpoint checker, the what tailwind breakpoint am i in checker, shows, in real-time, which Tailwind CSS breakpoint your viewport has reached. Instead of guessing your screen size, you read the active breakpoint straight off the page and know which responsive classes apply right now. This breakpoint tool works on any device you test.
Using the What Tailwind Breakpoint Am I In Checker
Open the page, then drag the edge of your browser window. The checker reads your viewport, compares it with each minimum width, and prints the matching label like a breakpoint debugger overlay. Keep it open during development so you can debug each layout change without opening dev tools. Nothing here needs to ship to production. A quick pass through the monitor count detector online catches issues before they become real problems.
Reading your viewport width and active breakpoint
Say your window is 1137 px wide. That sits above the lg minimum of 1024 px and below xl at 1280 px, so the checker reports lg and every lg: utility is live. You are 143 px short of xl. The live label is how you see which of the tailwind breakpoints is active and how close the next one is.
Tailwind Play and the development overlay
In Tailwind Play, a small JavaScript snippet or an overlay div can toggle with hidden and sm:inline to show the current label in the corner of the browser. Each label stays hidden until its breakpoint arrives, so only one shows at a time. In development mode that is enough, and the checker works without any configuration, even if the HTML has a class named hidden elsewhere.
Default Breakpoints Table With Screen Sizes
The default breakpoints in this breakpoint table are where most projects start. Each key turns on at its minimum width and stays on for larger screens. Use the free device pixel ratio checker to confirm everything looks correct before you rely on it elsewhere.
| Prefix | Min-width (px) | Width (rem) | Typical devices |
|---|---|---|---|
| sm | 640 px | 40 rem | Large phones |
| md | 768 px | 48 rem | Tablets |
| lg | 1024 px | 64 rem | Laptops |
| xl | 1280 px | 80 rem | Desktop monitors |
| 2xl | 1536 px | 96 rem | Large displays |
Screen width ranges your layout falls into
Every prefixed rule is a min-width query in your CSS, so each screen size lands in one range:
- Small screens: sm starts at 640 px width.
- Medium screens: md starts at 768 px width, the first tablet layout.
- Large screens: lg and xl take over from 1024 px width.
- Below sm, the default unprefixed styles apply on mobile.
Mobile-First Breakpoint System and Media Queries
Tailwind uses a mobile-first breakpoint system. A breakpoint prefix such as md: wraps a utility class in a min-width media query, so md:flex is flex from 768 px up. An unprefixed utility covers every screen, and the prefixed class overrides it. Every responsive utility follows this pattern, and the media queries come out in the same order as the table.
Targeting mobile screens with unprefixed utilities
To style mobile screens, use the unprefixed class, not sm:. In your HTML, text-center sm:text-left centres text on mobile and left-aligns it from 640 px. Read sm: as "at the small breakpoint", never "on small devices". A max-width variant handles the downward case.
Targeting a breakpoint range
To stack a responsive variant with a max variant, write md:max-lg:flex. It applies only between 768 and 1023 px, because Tailwind generates a max variant for every breakpoint.
Debugging a Missing Sidebar With the Breakpoint Tool
With the checker open, I chase a bug. A docs sidebar uses hidden lg:block and it will not show on my 1366 px laptop. I want to know whether the class is wrong or the window is. I open the checker and dock the browser devtools on the right, 358 px wide, which leaves a 1008 px viewport.
The checker answers right away: md, not lg. Tailwind's lg starts at 64rem, which is 1024 px, so I am 16 px short. The class is fine; the window is the problem. That is the number to watch here, because a gap this small looks like a bug in the CSS and costs people an hour.
I rerun the check with one input changed:
| Devtools width | Viewport | Active breakpoint |
|---|---|---|
| 358 px | 1008 px | md |
| 342 px | 1024 px | lg |
| 0 px (closed) | 1366 px | lg |
Narrowing the devtools panel by just 16 px flips the sidebar on, so I now know the exact threshold. I cross-check by hand: 1366 minus 358 is 1008, below 1024, so md. Two caveats matter. Media queries count the scrollbar, so a 1024 px window with a 15 px scrollbar still reads as 1024. And browser zoom changes the answer: at 125% zoom a 1280 px window is only 1024 CSS px wide, which lands exactly on lg. If the checker and your devtools disagree, trust the checker's CSS pixel reading and reset zoom to 100% before debugging.
My decision: keep the class, and set the devtools to a bottom dock so the layout has the full 1366 px while I work.
Custom Tailwind CSS Breakpoint Setup in Your Theme
Add or change breakpoints in your theme, such as --breakpoint-xs: 30rem or a wider 2xl at 100rem. Custom breakpoints keep one unit, rem, so the order stays predictable, and you can customize the configuration without removing the default set. Your responsive styles live in the class attribute of each HTML tag, so a new key like xs: works in every class list at once.
Custom breakpoints for flex and grid layout recipes
Once the checker shows you are at md or lg, these small class pairs decide your responsive layouts, and the same pairs work with any extra keys you add:
hidden md:flexhides a nav on mobile and shows it from md.flex flex-col lg:flex-rowstacks an article, then sets a row at lg.grid grid-cols-1 sm:grid-cols-2switches the display to two columns at sm.p-4 md:p-8raises padding, andtext-sm lg:text-lggrows the font size.
With xl and 2xl you can set a flex gap or logo size for large monitors the same way.
Container Queries Versus a Viewport Media Query
A viewport media query answers one question, how wide is the window. Container queries ask how wide the parent is, so the same card can switch layout inside a narrow sidebar on a large desktop. Reach for them when a component, not the page, drives the display. The checker reports viewport breakpoints only, so it will not show which container size applies to a component.
Responsive Design Debugging Alternatives
A responsive breakpoint debugger snippet in your layout is a simple alternative, and a JavaScript check of window.innerWidth works in any framework, including Bootstrap. Whichever you pick, add the viewport meta tag, test in the browser at each width, and compare what you see with the tailwind css breakpoints above before you ship.
Frequently Asked Questions
- What Tailwind breakpoint am I in right now?
- Your breakpoint is the largest default key whose min-width is at or below your viewport width: sm from 640 px, md from 768 px, lg from 1024 px, xl from 1280 px and 2xl from 1536 px. Below 640 px only unprefixed utilities apply.
- Why does sm: not target mobile screens?
- Tailwind is mobile-first, so sm: means 'at 640 px and wider'. Style mobile with the unprefixed utility, then override it at larger breakpoints.
- Are Tailwind breakpoints min-width or max-width?
- Prefixes such as md: are min-width media queries. Use the max-* variants, for example max-lg:, to apply a style below a breakpoint, or stack md:max-lg: for a single range.
- Why does the checker disagree with my screen resolution?
- Breakpoints follow the CSS viewport width, not the monitor resolution. Browser zoom, docked devtools and display scaling all change that width.
- Does the scrollbar count toward the viewport width?
- Yes. Media queries measure the viewport including the scrollbar, so a 1024 px window with a scrollbar still counts as 1024 px.
- Can I add custom breakpoints?
- Yes. Define --breakpoint-* variables in your theme, such as --breakpoint-xs: 30rem. This checker uses the default five values only.
- How do I show the current breakpoint while developing?
- Add a small fixed overlay that toggles labels with hidden and sm:inline style classes, or use a breakpoint tool script in development only.