breakpoint

Preset breakpoint values and their consumers.

Scope

These values come from the current preset. Project theme declarations can override them. Mode-specific entries are labeled separately.

These lengths define the shared viewport thresholds. The named media conditions are listed separately in Breakpoints.

Values

4xs

--breakpoint-4xs

Default22.5rem

3xs

--breakpoint-3xs

Default30rem

2xs

--breakpoint-2xs

Default37.5rem

xs

--breakpoint-xs

Default48rem

sm

--breakpoint-sm

Default52.125rem

md

--breakpoint-md

Default64rem

lg

--breakpoint-lg

Default80rem

xl

--breakpoint-xl

Default90rem

2xl

--breakpoint-2xl

Default100rem

3xl

--breakpoint-3xl

Default120rem

4xl

--breakpoint-4xl

Default160rem

Consumers

Use an explicit CSS variable reference.

Customize

See variables and modes and theme directives. For usage and examples, see Breakpoints.