Breakpoints

Pipeline keeps Tailwind’s default viewport breakpoints and adds two of its own in src/theme/theme.css. Each one is a min-width variant, so 3xl:px-8 applies from 120rem up and max-3xl:px-8 applies below it.

Variant	Min width	At a 16px root	Use
`sm`	`40rem`	640px	Tailwind default.
`md`	`48rem`	768px	Tailwind default.
`lg`	`64rem`	1024px	Tailwind default.
`desktop`	`64rem`	1024px	Alias for `lg`. The App layout switches from mobile panels to panes.
`xl`	`80rem`	1280px	Tailwind default.
`2xl`	`96rem`	1536px	Tailwind default.
`3xl`	`120rem`	1920px	Pipeline. App body content widens from `41.5rem` to `47.5rem`.

3xl targets 1080p monitors and wider. At 120rem, the navigation and sidebar at their default widths leave the body room for the wider content cap and its gutters. See App layout for the content cap.

For styles that depend on a pane’s width rather than the viewport’s, use container query variants instead. The App layout names its panes app-nav, app-body and app-sidebar, so @2xl/app-body: targets the body pane.