HTML with Tailwind classes
What is a Tailwind Breakpoint Preview?
A Tailwind breakpoint preview is a side-by-side viewer that renders the same HTML at several responsive sizes at once. Instead of resizing your browser window again and again, you paste your markup one time and the tool shows how it looks for the base (mobile) size and for the sm, md, lg, and xl breakpoints together.
Each of the five panels is an isolated iframe. The Default panel strips the sm:, md:, lg:, xl:, and 2xl: prefixes so only the unprefixed, mobile-first styles remain. The sm, md, lg, and xl panels keep the full markup, so the responsive utilities apply as they normally would.
You can load the built-in example snippets for a grid, a navbar, a card grid, and typography, or paste your own HTML. Click Update Preview or press Ctrl+Enter to re-render, and tick Sync scroll to keep every panel scrolling together while you compare them.
The whole viewer runs in the browser. It does not upload your markup, and it does not require a build step, a server round trip, or any changes to your project.
Key Concepts
- Five panels — base, sm, md, lg, and xl rendered next to each other.
- Base panel — strips breakpoint prefixes to reveal the mobile-first styles.
- Breakpoint panels — sm (640px+), md (768px+), lg (1024px+), and xl (1280px+) keep the full markup.
- Example snippets — ready-made grid, navbar, card, and text layouts.
- Keyboard shortcut — press Ctrl+Enter to update the preview.
- Sync scroll — an optional toggle that keeps all panels aligned while scrolling.
How to Use
- Paste your HTML — paste markup that uses Tailwind responsive classes such as
sm:flex,md:grid-cols-3, orlg:text-xl. - Load an example — optionally click a grid, navbar, card, or text example to start from a working layout.
- Update the preview — click Update Preview or press Ctrl+Enter to render the markup in all five panels.
- Compare the panels — look across the base, sm, md, lg, and xl panels to see how the layout changes at each step.
- Toggle sync scroll — turn on Sync scroll to keep every panel scrolling in step while you review.
Breakpoint Reference
| Panel | Min width | Prefix | Typical device |
|---|---|---|---|
| base | 0px | none | Mobile-first default styles. |
| sm | 640px | sm: | Large phones and small tablets. |
| md | 768px | md: | Tablets in portrait. |
| lg | 1024px | lg: | Laptops and small desktops. |
| xl | 1280px | xl: | Standard desktops. |
| 2xl | 1536px | 2xl: | Not shown as a panel; test it directly in the browser. |
| Example | What it demonstrates |
|---|---|
| Grid Layout | A grid that goes from 1 column to 2, 3, and 4 columns (grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4). |
| Navbar | A navigation bar that stacks on mobile and turns into a row at sm (flex-col sm:flex-row). |
| Card Grid | Cards that reflow from 1 column to 2 at sm and 3 at lg (grid-cols-1 sm:grid-cols-2 lg:grid-cols-3). |
| Typography | Text that scales up through text-sm, sm:text-base, md:text-lg, lg:text-xl, and xl:text-2xl. |
Worked Examples
- Stacked to row — with
flex-col sm:flex-row, the base panel shows a vertical stack while the sm, md, lg, and xl panels show items side by side. - Grid columns — with
grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4, the base panel shows 1 column, sm shows 2, md shows 3, and lg and xl show 4. - Card grid — with
grid-cols-1 sm:grid-cols-2 lg:grid-cols-3, cards stack at base, split into 2 at sm, and hold at 2 for md before reaching 3 at lg. - Responsive text — with
text-sm sm:text-base md:text-lg lg:text-xl xl:text-2xl, the same line grows one step larger in each successive panel. - Base stripping — a class such as
md:hiddendisappears from the Default panel, so you can confirm what mobile users see without any breakpoint overrides. - Gaps and spacing — with
gap-2 sm:gap-4, the base panel shows a tight 8px gap while the sm panel onward show a roomier 16px gap.
Tips and Common Mistakes
- Write mobile-first — start with unprefixed classes for small screens and add sm:, md:, lg:, and xl: overrides as the viewport grows.
- Read the Default panel first — because it strips prefixes, it shows exactly what a mobile visitor sees.
- Know the panel width caveat — a panel can be narrower than the breakpoint it represents, so some responsive styles might not activate; this is expected behavior.
- Learn from the examples — load the grid, navbar, or card snippet to see a working responsive pattern before editing your own markup.
- Use Ctrl+Enter — the keyboard shortcut updates the preview without reaching for the button.
- Enable sync scroll for long pages — it keeps tall layouts aligned so you compare the same section across panels.
Common Use Cases
Seeing responsive behavior next to each other catches problems that are easy to miss when you resize a single window. These are some of the ways the preview helps.
- Debugging responsive layouts — spot a broken row or overlapping element at a specific breakpoint at a glance.
- Reviewing breakpoint changes — confirm that a new sm: or lg: class only affects the panels it should.
- Teaching responsive design — show students how mobile-first utilities stack and override.
- Comparing layout options — paste two variations in turn and compare how each reflows.
- Client previews — give a quick side-by-side view of a component across screen sizes.
- Regression checks — verify that a refactor keeps the same responsive behavior.
Frequently Asked Questions
How does the breakpoint simulation work?
Each of the five panels is an isolated iframe that reuses your page stylesheets and renders the same markup. The Default panel strips the sm:, md:, lg:, xl:, and 2xl: prefixes so the unprefixed styles show, while the other panels keep the full markup.
Why do the previews sometimes differ from my browser at the actual breakpoint size?
Each panel is narrower than the real viewport it represents, so a responsive style may not activate even though it would in a full-width browser. This is expected behavior for a side-by-side viewer.
Can I preview the 2xl breakpoint?
The viewer shows five panels up to xl (1280px+). The 2xl breakpoint at 1536px+ is not included because most screens cannot display that width comfortably beside other panels, so test it directly in your browser.
What does the Default panel do?
The Default panel removes the sm:, md:, lg:, xl:, and 2xl: prefixes from your markup, which leaves only the mobile-first base styles.
How do I update the preview?
Click the Update Preview button or press Ctrl+Enter while the HTML textarea is focused.
What example snippets are included?
There are four: a responsive Grid Layout, a Navbar, a Card Grid, and a Typography example. Each is loaded with the example buttons.
What does Sync scroll do?
When Sync scroll is enabled, scrolling one panel scrolls the others by the same amount so tall layouts stay aligned for comparison.
Does the tool upload my HTML?
No. The markup is rendered locally in iframes in your browser and is never sent to a server.