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.)
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.
Common viewport widths
Quick references for popular device CSS widths. Generate matching @media snippets or validate full specs via device compare.