Breakpoints

The five responsive thresholds Koala builds on: Tailwind v4 defaults, used verbatim. Styles are mobile-first: an unprefixed utility applies everywhere, a prefixed one applies from that width up.

The scale#

Each breakpoint is a min-width media query. The bar shows where each one kicks in, relative to the 2xl ceiling.

40rem

≥ 640px

48rem

≥ 768px

64rem

≥ 1024px

80rem

≥ 1280px

2xl

96rem

≥ 1536px

Mobile-first#

Write the small-screen layout with unprefixed utilities, then layer overrides at each breakpoint and up. Don't use sm: to target only mobile: it means 640px and wider.

responsive.tsxTSX

// Stacked on phones, side-by-side from 640px (sm), wider gap from 1024px (lg).
<div className="flex flex-col gap-4 sm:flex-row lg:gap-8">
  <aside className="w-full sm:w-64">…</aside>
  <main className="flex-1">…</main>
</div>

Targeting a single range#

For styles that should apply below a breakpoint, use the max-* variants. Combine a min and a max prefix to scope a utility to a single band.

ranges.tsxTSX

<div className="max-sm:hidden">Hidden below 640px</div>
<div className="md:max-lg:bg-accent">Tinted only between 768px and 1024px</div>

Previewing breakpoints#

Media queries respond to the viewport, so you can't see a layout reflow just by resizing a column. The Marketing Sections preview renders each section inside an iframe, so its own breakpoints respond to the frame width, so switch between Mobile (375px), Tablet (768px) and Desktop, or drag the handle to any width in between.