Vibe Coding
Viewport Breakpoint Checker
Resize your browser and see exactly which CSS breakpoint is active — Tailwind, Bootstrap, MUI, and Chakra, live.
—
— × —
| Breakpoint | Prefix | Min width | CSS query |
|---|---|---|---|
| Extra small | — | 0px | @media (max-width: 639px) |
| Small | sm: | 640px | @media (min-width: 640px) |
| Medium | md: | 768px | @media (min-width: 768px) |
| Large | lg: | 1024px | @media (min-width: 1024px) |
| Extra large | xl: | 1280px | @media (min-width: 1280px) |
| 2X large | 2xl: | 1536px | @media (min-width: 1536px) |
Breakpoints by framework
Tailwind CSS
—
Bootstrap 5
—
Material UI
—
Chakra UI
—
About the Viewport & Breakpoint Checker
Building responsive layouts requires knowing exactly which breakpoint is active at any window size. This tool shows the current breakpoint label, exact pixel dimensions, and where you sit in the Tailwind, Bootstrap, Material UI, and Chakra UI breakpoint systems — all updating live as you resize.
How to use it
Simply open the page and resize your browser window. The large label updates instantly to show the active Tailwind breakpoint (xs, sm, md, lg, xl, 2xl), along with your exact viewport width and height in pixels and a table showing where you are across major CSS frameworks.
Frequently Asked Questions
Which breakpoints are shown?
Tailwind CSS by default: xs (0), sm (640), md (768), lg (1024), xl (1280), 2xl (1536). Plus Bootstrap 5, Material UI, and Chakra UI equivalents.
Does it update as I resize?
Yes — it listens to the resize event and updates everything in real time as you drag your browser window.
Why use this instead of DevTools?
It is faster for quick checks and shows multiple frameworks at once without opening DevTools.
Vibe Coding tools