Foundations

Breakpoints

Mobile-first breakpoints aligned with the Tailwind v4 defaults. Each step is exposed as a token in packages/ui/tokens.css so JS consumers and documentation reference the same values as the utility classes.

Scale

Bars are scaled to --bp-2xl (1536px = 100%). Read the width visually, then check the px figure on the right.

  • sm--bp-sm
    40rem640px

    Mobile landscape, large phones.

    Switch from stacked to two-column nav. Show secondary actions.

  • md--bp-md
    48rem768px

    Tablet portrait, small laptops.

    Sidebar appears. Tables stop wrapping. Hero gains room.

  • lg--bp-lg
    64rem1024px

    Tablet landscape, standard laptops.

    Full product layout: sidebar + main + side panel. Dense dashboards.

  • xl--bp-xl
    80rem1280px

    Standard desktop.

    Marketing hero at full width. Extra column of content.

  • 2xl--bp-2xl
    96rem1536px

    Wide desktop and external monitors.

    Generous gutters. Rarely worth designing past this point.

Usage

Tailwind v4 generates utility prefixes from these tokens automatically. Write mobile styles unprefixed, then layer breakpoint prefixes for larger viewports.

<div className="flex flex-col md:flex-row lg:gap-8">
  <aside className="md:w-64">…</aside>
  <main className="flex-1">…</main>
</div>

Reads as: stack on mobile, side-by-side from md (768px), and at lg (1024px) the gap opens up to 2rem.