Sizing

Width, height, min/max constraints, and border radius. Fixed pixel values, fluid ranges, and explicit unit suffixes for percent and viewport units.

Width & Height w-{value} / h-{value}

w-200 h-80 (fixed)

w-100-400 (fluid width) h-120 (fixed height)

Widths support fluid ranges (w-100-400). Heights are fixed-only — fluid clamp scales by viewport width, which misbehaves on portrait orientations. Use a viewport unit like h-100dvh or minh-80svh for responsive heights.

w-auto and h-auto are also available (including breakpoint variants like w-md-auto) for content-driven sizing.

Max Width maxw-{value} / Min Width minw-{value}

maxw-600

maxw-400

minw-320 maxw-800 (constrained)

Fluid max-width: maxw-400-800 scales the constraint itself.

Max Height maxh-{value} / Min Height minh-{value}

maxh-100 overflow-auto — This box has a max-height and scrolls. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

minh-150 (centered with flex)

Percent & Viewport Units

Sizing prefixes (w, h, maxw, minw, maxh, minh) accept explicit unit suffixes. The unit is emitted verbatim — no rem conversion, no fluid interpolation.

w-50% — half width of parent

w-100% — full width of parent

maxw-80% — capped at 80% of parent

minh-50% — at least half of parent height

Supported units: %, vw, vh, vmin, vmax, svw, svh, lvw, lvh, dvw, dvh, ch.

Reading measure maxw-65ch

A comfortable line of prose runs 45–75 characters. ch is the width of the font's 0 glyph, so maxw-65ch caps this paragraph at ~65 characters per line and adapts automatically when the font or its size changes — maxw-600 only ever approximates that.

Common patterns: minh-100dvh for full-height heroes that respect the mobile address bar, maxh-80svh to pin against the small viewport, w-100vw for full-viewport overlays. Breakpoint variants work the same way — minh-md-100dvh, w-lg-50%.

Border Radius radius-{value} / radius-{min}-{max}

radius-4

radius-8

radius-16

radius-4-16

radius-40

Fluid: radius-4-16 scales from 4px to 16px. Fixed: radius-8 stays at 0.5rem.

Sizing at Breakpoint

w-md-300 — 300px width from md up

maxw-lg-600 — max-width 600px from lg up

minh-md-200 — min-height 200px from md up

GitHub