Breakpoints
Responsive breakpoint scale powered by Tailwind v4 defaults (via DaisyUI v5): sm, md, lg, xl, 2xl — with live viewport indicator and container-query context.
Live Viewport
Resize the browser window to see the active breakpoint update in real time.
Breakpoint Scale
Tailwind v4 defaults — no custom config. All breakpoints are min-width (mobile-first).
xs
is not a Tailwind prefix; it refers to the default (no-prefix) state below
sm.
| Token | Min-Width | rem | Tailwind Prefix | Typical Target | Range |
|---|---|---|---|---|---|
xs
|
0px
|
0rem
|
— | Feature phones, small Android | |
sm
|
640px
|
40rem
|
sm:
|
Large phones, small tablets | |
md
|
768px
|
48rem
|
md:
|
Tablets, landscape phones | |
lg
|
1024px
|
64rem
|
lg:
|
Laptops, landscape tablets | |
xl
|
1280px
|
80rem
|
xl:
|
Desktops, large laptops | |
2xl
|
1536px
|
96rem
|
2xl:
|
Wide monitors |
Visual Ruler
Proportional representation of each zone across the 0–1800px spectrum.
xs zone (0–640px) appears widest because it covers the most raw pixels — this is intentional; most users arrive on mobile.
Responsive Grid Demo
Resize the window — this grid reflows columns at each Tailwind v4 breakpoint.
/* grid-template-columns changes at: */
default (xs): 1 col
sm (640px): 2 col → md (768px): 3 col
lg (1024px): 4 col → xl (1280px): 5 col
Usage
Mobile-First (recommended)
<div class="
w-full
sm:w-1/2
md:w-1/3
lg:max-w-xs
">Show / Hide
<div class="hidden md:block">
<div class="block md:hidden">Container Queries (Tailwind v4 native)
<div class="@container">
<div class="@md:flex @lg:grid-cols-3">
Responds to parent width,
not viewport.
</div>
</div>Built into Tailwind v4 — no plugin needed. Ideal for widget/block contexts.