Tokens & namespaces

Containers

Named containers conditions in the current preset.

Conditions

These thresholds come from the current preset. Breakpoints have named entrances; container thresholds use complete native queries. Project theme tokens can override the values.

Append a condition such as @container((width>=28rem)) to a class. It measures an eligible ancestor query container; establish that container with container or a named container declaration. Each example below shows the complete generated CSS for an opacity class at that threshold.

3xs

CSS
@layer utilities {  @container (width>=16rem) {    .opacity\:1\@container\(\(width\>\=16rem\)\) {      opacity: 1    }  }}

2xs

CSS
@layer utilities {  @container (width>=18rem) {    .opacity\:1\@container\(\(width\>\=18rem\)\) {      opacity: 1    }  }}

xs

CSS
@layer utilities {  @container (width>=20rem) {    .opacity\:1\@container\(\(width\>\=20rem\)\) {      opacity: 1    }  }}

sm

CSS
@layer utilities {  @container (width>=24rem) {    .opacity\:1\@container\(\(width\>\=24rem\)\) {      opacity: 1    }  }}

md

CSS
@layer utilities {  @container (width>=28rem) {    .opacity\:1\@container\(\(width\>\=28rem\)\) {      opacity: 1    }  }}

lg

CSS
@layer utilities {  @container (width>=32rem) {    .opacity\:1\@container\(\(width\>\=32rem\)\) {      opacity: 1    }  }}

xl

CSS
@layer utilities {  @container (width>=36rem) {    .opacity\:1\@container\(\(width\>\=36rem\)\) {      opacity: 1    }  }}

2xl

CSS
@layer utilities {  @container (width>=42rem) {    .opacity\:1\@container\(\(width\>\=42rem\)\) {      opacity: 1    }  }}

3xl

CSS
@layer utilities {  @container (width>=48rem) {    .opacity\:1\@container\(\(width\>\=48rem\)\) {      opacity: 1    }  }}

4xl

CSS
@layer utilities {  @container (width>=56rem) {    .opacity\:1\@container\(\(width\>\=56rem\)\) {      opacity: 1    }  }}

5xl

CSS
@layer utilities {  @container (width>=64rem) {    .opacity\:1\@container\(\(width\>\=64rem\)\) {      opacity: 1    }  }}

6xl

CSS
@layer utilities {  @container (width>=72rem) {    .opacity\:1\@container\(\(width\>\=72rem\)\) {      opacity: 1    }  }}

7xl

CSS
@layer utilities {  @container (width>=80rem) {    .opacity\:1\@container\(\(width\>\=80rem\)\) {      opacity: 1    }  }}

8xl

CSS
@layer utilities {  @container (width>=90rem) {    .opacity\:1\@container\(\(width\>\=90rem\)\) {      opacity: 1    }  }}

See conditions for syntax and composition, or the containers guide for working examples.

© 2026 Aoyue Design LLC.MIT License
Trademark Policy