Skip to content

Design system

Documentation

DesignFoundations / Breakpoints

Foundations / Breakpoints

Stable

Breakpoints

Breakpoints describe when a layout needs a different relationship, not a device model.

On this page

Shared thresholds

Tailwind owns the breakpoint values in the @theme block of src/app/globals.css. Native CSS media queries in the docs shell mirror the same literal values because CSS custom properties are not reliable media-query conditions.

xs30rem / 480px
sm40rem / 640px
md48rem / 768px
lg64rem / 1024px
xl80rem / 1280px
2xl96rem / 1536px

How to choose

QuestionDecision
Does the content no longer fit?Change the grid or stack the region at the smallest threshold that resolves the problem.
Is the change only cosmetic?Prefer fluid sizing with clamp() instead of a new breakpoint.
Does the navigation compete with content?Move it into the mobile navigation pattern before reducing the content measure.

Small-screen rules

  • Keep touch targets and readable text sizes; reduce outer gutters first.
  • Let tables and code blocks scroll in their own region rather than forcing the page to overflow.
  • Test the route at a narrow width and with keyboard focus before marking a breakpoint change complete.