Breakpoint inspector
Responsive Breakpoint Checker — Tailwind CSS Breakpoints
Enter any width in pixels to see which min-width tiers match, with a visual Tailwind ruler. Defaults: sm 640, md 768, lg 1024, xl 1280, 2xl 1536.
Responsive breakpoint checker
Viewport width
Largest Tailwind breakpoint satisfied: base (min-width rules use the same pixel values as Tailwind v3 defaults.)
Tailwind breakpoint ruler390px
0sm640md768lg1024xl12802xl15361920
min-width breakpoints
| Name | px | Matches |
|---|---|---|
| sm | 640 | no |
| md | 768 | no |
| lg | 1024 | no |
| xl | 1280 | no |
| 2xl | 1536 | no |
Quick presets
Generate CSS snippets in our media query generator, compare real device specs in our device database, or device compare.
How active Tailwind breakpoints are labeled
We show the largest breakpoint your width satisfies. At 900px, for example, you are in the md range for min-width stacking. Always verify custom values in your config.
Explore real hardware sizes in our device list or test live values on what is my viewport.