Tailwind breakpoint tester
Drag the width slider (or type a px value) to see which default Tailwind breakpoint is active, which variants apply, and how a preview frame looks at that size. Width and custom breakpoints sync to the URL.
Format: name:px or bare px, comma-separated.
Active breakpoint
At : (below first breakpoint)
Variant status
No breakpoints configured — enable defaults or add custom ones.
Example classes
Responsive preview
Preview frame
This box is wide (capped by the page). Active:
Preview uses inline width only — not live Tailwind classes (those need a build).
About this tool
Tailwind’s default screens are mobile-first min-width breakpoints. At a given width, every smaller breakpoint’s variant is also “on” — so at 800px both sm: andmd: apply.
Shareable URL params: ?w= width,bp= custom breakpoints,def=0 to hide defaults. Runs fully in the browser.