容器尺寸

類別

容器 token 設定的是長度，不會定義檢視區或容器查詢。w-full、max-w-fit、basis-min 這類填滿或內在尺寸形式是固定 utility，與這些 token 無關。

值

每個值都是供尺寸屬性使用的長度。像素換算假設根元素字型大小為 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 則會直接設定寬度。這兩個 class 都不會加入置中、內距或查詢容器隔離。修改 --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 和其他尺寸 class。

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

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

另見 主題指令與版面配置.