容器尺寸

类

容器令牌设置的是长度，不会定义视口或容器查询。w-full、max-w-fit、basis-min 这类填满或内在尺寸形式是固定工具类，与这些令牌无关。

值

每个值都是供尺寸属性使用的长度。像素换算假设根元素字号为 16px。这些值不是视口断点，也不是容器查询定义。

最大尺寸只设置上限

max-w-3xs 设置 max-width: var(--container-3xs)，其预设值为 16rem。当包含块的可用空间较少时，宽度为 auto 的普通块仍可以更窄。

宽度为 auto 的普通块会适应可用空间，直到达到最大宽度。两个父元素按相同比例绘制，根元素字号为 16px。

文字说明

1. max-w-3xs 读取预设的 --container-3xs 值 16rem。两个示例都在普通块布局中使用 auto 宽度，采用 border-box 尺寸计算，且没有最小宽度限制。
2. 第一个父元素提供 20rem 空间。子元素达到 16rem 上限后停止增宽，后面留下未使用的空间。
3. 第二个父元素提供 13rem 空间。子元素适应这个较小空间，不会变成 16rem 宽。
4. 虚线轮廓标示可用宽度，不是生成的边框或查询容器。两个父元素按相同比例绘制，根元素字号为 16px；高度则由相同内容决定。

w-3xs 则直接设置宽度。这两个类都不会添加居中、内边距或查询容器隔离。修改 --container-md 不会重新定义 @container(--md)，也不会改变显式写出的查询阈值。创建查询容器时，请使用原生 container-type 和 container-name。

实际尺寸仍受原生布局影响：最小尺寸、盒模型计算、Flexbox 和 Grid 都可能改变使用尺寸。最大尺寸不会改变文本换行或溢出规则。若要设计页面外层容器或决定响应式布局，请继续阅读布局指南。

另见 具名查询条件与容器查询语法与原生尺寸规则.

用法

限制对话框宽度与文本行长。

<div class="… max-w-xs">  <p>Leave this page?</p>  <p class="… max-w-3xs">Changes you made will not be saved.</p></div>

@layer theme {  :root,  :host {    --container-3xs: 16rem;    --container-xs: 20rem  }}@layer utilities {  .max-w-3xs {    max-width: var(--container-3xs)  }  .max-w-xs {    max-width: var(--container-xs)  }}

自定义

修改预设值或添加尺寸：--container-prose 会创建 max-w-prose、w-prose 和其他尺寸类。

@theme {  --container-prose: 40rem;}

@layer theme {  :root,  :host {    --container-prose: 40rem  }}@layer utilities {  .max-w-prose {    max-width: var(--container-prose)  }}

另见 主题指令与布局.