container

The css.container utility works just like css.media, but targets CSS container queries instead of viewport media queries.

Available to clients only

If you require AST parsing and compilation for an RSC preview such as Next.js, you cannot use these zss-utils libraries and must instead define static variables using the defineConsts API.

Same function names: minWidth, maxWidth, range, etc.
Accepts number (auto-suffixed with px) or string
Can be used as a selector key:

  [container.minWidth(600)]: {
    display: "grid"
  }

API

The following functions mirror those in media, but use container rules:

Function	Output
`container.minWidth(240)`	`@container (min-width: 240px)`
`container.minHeight("20rem")`	`@container (min-height: 20rem)`
`container.range("width <= 400px")`	`@container (width <= 400px)`

container

API

See also: media

On this page

container

API

🔗 Related

See also: media

On this page