breakpoints

Tailwind CSS default breakpoints.


Package	`@vizejs/composable/breakpoints`
Own the source	`vize lib pull composable:breakpoints`
Runtime exports	`breakpointsTailwind`, `breakpointsBootstrapV5`, `useBreakpoints`, `toPixels`
Gzip budget	2560 B

Usage

import { breakpointsTailwind, breakpointsBootstrapV5, useBreakpoints, toPixels } from "@vizejs/composable/breakpoints";

Runtime contract

Utility	Category	Stability	SSR	Hydration	Cleanup	Targets	Host globals	Uses
`useBreakpoints`	media	experimental	deterministic-fallback	caller-managed	reactive-scope	web, desktop	`window`	`useMediaQuery`, `toPixels`
`toPixels`	media	experimental	safe	not-applicable	none	web, server, worker, native, desktop, terminal	—	—

API

`breakpointsTailwind`

Tailwind CSS default breakpoints.

const breakpointsTailwind

`breakpointsBootstrapV5`

Bootstrap 5 default breakpoints.

const breakpointsBootstrapV5

`useBreakpoints`

Reactive, typed breakpoint helpers built on media queries. Breakpoint names are inferred from the map, so typos are compile errors. greater and smaller use fractional offsets (width > 767.98px) so adjacent breakpoints never overlap. With ssrWidth, the server evaluates each query arithmetically for deterministic, hydration-stable output. Subscriptions are released with the owning reactive scope.

function useBreakpoints<const Name extends string>( breakpoints: Breakpoints<Name> & { readonly [Reserved in ReservedBreakpointName]?: never }, options: UseBreakpointsOptions = {}, ): BreakpointsControls<Name>

`toPixels`

Convert a BreakpointValue to CSS pixels.

function toPixels(value: BreakpointValue, rootFontSize = 16): number

Types

`UseBreakpointsOptions`

Options for useBreakpoints.

Member	Type	Description
`ssrWidth`?	`number`	Viewport width assumed during server rendering (and whenever no media capability exists). Queries are evaluated against it arithmetically, so the server output matches a client of that width.
`rootFontSize`?	`number`	Root font size used to convert `rem`/`em` values for `ssrWidth`.