Containers

Container tokens constrain layout content to specific maximum widths.


@theme {
  --container-3xs: 16rem;
  --container-2xs: 18rem;
  --container-xs: 20rem;
  --container-sm: 24rem;
  --container-md: 28rem;
  --container-lg: 32rem;
  --container-xl: 36rem;
  --container-2xl: 42rem;
  --container-3xl: 48rem;
  --container-4xl: 56rem;
  --container-5xl: 64rem;
  --container-6xl: 72rem;
  --container-7xl: 80rem;
}

3xs

16rem / 256px

2xs

18rem / 288px

20rem / 320px

24rem / 384px

28rem / 448px

32rem / 512px

36rem / 576px

2xl

42rem / 672px

3xl

48rem / 768px

4xl

56rem / 896px

5xl

64rem / 1024px

6xl

72rem / 1152px

7xl

80rem / 1280px