網站導覽
設計變數

Token 家族

所有預設 token 家族的 class 前綴、token 命名空間與原生屬性。

本頁目錄

token 家族連結 class 前綴、token 命名空間，以及它所設定的 CSS 屬性。這些表格列出預設集註冊的所有家族，也包括沒有預設值的家族。

閱讀家族對照表

單靠鍵無法識別 token。在 p-md 中，p- 讀取 spacing 命名空間，md 則選取 --spacing-md。相同的鍵用在其他家族中，可能會選取不同的 token。

相同的鍵可以選取不同 token

每列分別解析。重複出現的 md 是命名空間內的鍵，不是這些 class 共用的單一全域值。

文字說明
  1. p-md 選取 --spacing-md，並設定 padding: var(--spacing-md)。
  2. max-w-md 選取 --container-md，並設定 max-width: var(--container-md)。
  3. font-md 選取 --font-size-md，並設定 font-size: var(--font-size-md)。在預設集的 font- 家族中，md 只會選出 font-size 命名空間。
  4. 醒目標示的 md 片段，是不同命名空間中的同一個鍵。箭頭表示查找與屬性對應，不是三列之間的相依關係。圖中省略主題值與串接層包覆，下方的生成範例會包含兩者。
<div class="p-md max-w-md font-md">Content</div>
產生的 CSS
@layer theme {  :root,  :host {    --font-size-md: 1rem;    --spacing-md: 1rem;    --container-md: 28rem  }}@layer utilities {  .font-md {    font-size: var(--font-size-md)  }  .max-w-md {    max-width: var(--container-md)  }  .p-md {    padding: var(--spacing-md)  }}

每列依序表示前綴 → token 名稱模式 → 原生屬性。請以已註冊的鍵取代 *。連結的值頁面列出可用鍵；命名空間欄則指出該家族接受哪些 token。

色盤與色彩角色

前綴Token 命名空間屬性
b---color-*border-color
bb---color-*border-bottom-color
bg---color-*background-color
bl---color-*border-left-color
br---color-*border-right-color
bt---color-*border-top-color
bx---color-*border-inline-color
by---color-*border-block-color
fg---color-*color
bxe---color-*border-inline-end-color
bxs---color-*border-inline-start-color
bye---color-*border-block-end-color
bys---color-*border-block-start-color
fill---color-*fill
caret---color-*caret-color
accent---color-*accent-color
stroke---color-*stroke
outline---color-*outline-color
text-fill-color---color-*-webkit-text-fill-color

值請見 色盤與色彩角色.

間距

前綴Token 命名空間屬性
m---spacing-*margin
p---spacing-*padding
ix---spacing-*inset-inline
iy---spacing-*inset-block
mb---spacing-*margin-bottom
ml---spacing-*margin-left
mr---spacing-*margin-right
mt---spacing-*margin-top
mx---spacing-*margin-inline
my---spacing-*margin-block
pb---spacing-*padding-bottom
pl---spacing-*padding-left
pr---spacing-*padding-right
pt---spacing-*padding-top
px---spacing-*padding-inline
py---spacing-*padding-block
gap---spacing-*gap
ixe---spacing-*inset-inline-end
ixs---spacing-*inset-inline-start
iye---spacing-*inset-block-end
iys---spacing-*inset-block-start
mxe---spacing-*margin-inline-end
mxs---spacing-*margin-inline-start
mye---spacing-*margin-block-end
mys---spacing-*margin-block-start
pxe---spacing-*padding-inline-end
pxs---spacing-*padding-inline-start
pye---spacing-*padding-block-end
pys---spacing-*padding-block-start
top---spacing-*top
left---spacing-*left
inset---spacing-*inset
right---spacing-*right
bottom---spacing-*bottom
col-gap---spacing-*column-gap
row-gap---spacing-*row-gap
scroll-m---spacing-*scroll-margin
scroll-p---spacing-*scroll-padding
scroll-mb---spacing-*scroll-margin-bottom
scroll-ml---spacing-*scroll-margin-left
scroll-mr---spacing-*scroll-margin-right
scroll-mt---spacing-*scroll-margin-top
scroll-mx---spacing-*scroll-margin-inline
scroll-my---spacing-*scroll-margin-block
scroll-pb---spacing-*scroll-padding-bottom
scroll-pl---spacing-*scroll-padding-left
scroll-pr---spacing-*scroll-padding-right
scroll-pt---spacing-*scroll-padding-top
scroll-px---spacing-*scroll-padding-inline
scroll-py---spacing-*scroll-padding-block
translate---spacing-*translate
scroll-mxe---spacing-*scroll-margin-inline-end
scroll-mxs---spacing-*scroll-margin-inline-start
scroll-mye---spacing-*scroll-margin-block-end
scroll-mys---spacing-*scroll-margin-block-start
scroll-pxe---spacing-*scroll-padding-inline-end
scroll-pxs---spacing-*scroll-padding-inline-start
scroll-pye---spacing-*scroll-padding-block-end
scroll-pys---spacing-*scroll-padding-block-start
shape-margin---spacing-*shape-margin
word-spacing---spacing-*word-spacing
border-spacing---spacing-*border-spacing
outline-offset---spacing-*outline-offset

值請見 間距.

容器尺寸

前綴Token 命名空間屬性
h---container-*height
w---container-*width
basis---container-*flex-basis
max-h---container-*max-height
max-w---container-*max-width
min-h---container-*min-height
min-w---container-*min-width
size-x---container-*inline-size
size-y---container-*block-size
max-size-x---container-*max-inline-size
max-size-y---container-*max-block-size
min-size-x---container-*min-inline-size
min-size-y---container-*min-block-size

值請見 容器尺寸.

圓角

前綴Token 命名空間屬性
r---radius-*border-radius
rbl---radius-*border-bottom-left-radius
rbr---radius-*border-bottom-right-radius
ree---radius-*border-end-end-radius
res---radius-*border-end-start-radius
rse---radius-*border-start-end-radius
rss---radius-*border-start-start-radius
rtl---radius-*border-top-left-radius
rtr---radius-*border-top-right-radius

值請見 圓角.

陰影

前綴Token 命名空間屬性
shadow---shadow-*box-shadow

值請見 陰影.

字型

前綴Token 命名空間屬性
font---font-family-*font-family
font---font-size-*font-size
font---font-weight-*font-weight

值請見 字型.

文字

前綴Token 命名空間屬性
text---text-*font-size, line-height, letter-spacing

值請見 文字.

行高

前綴Token 命名空間屬性
leading---leading-*line-height

值請見 行高.

字距

前綴Token 命名空間屬性
tracking---tracking-*letter-spacing

值請見 字距.

動態效果

前綴Token 命名空間屬性
animate---animate-*animation
animation---duration-*animation-duration
animation---easing-*animation-timing-function
transition---duration-*transition-duration
transition---easing-*transition-timing-function
animation-delay---duration-*animation-delay
transition-delay---duration-*transition-delay

值請見 動態效果.

解析邊界

font- 對 --font-family-*、--font-size-* 與 --font-weight-* 各有獨立家族。鍵必須能選出其中一個；如果同一個鍵存在於多個命名空間中，class 就會有歧義，而且不會產生 CSS。

請在 @theme 中註冊 token。寫在它外面的原生自訂屬性不會註冊鍵，新增命名空間也不會自動建立 utility 家族。新增家族時，請定義對應的 @utility 模式。

--color-text-muted 屬於 color 命名空間，鍵為 text-muted。色彩角色與色盤色彩使用相同家族，並不是獨立的 utility 命名空間。

本索引介紹會讀取 token 的家族。w-full 這類固定拼寫即使遇到同鍵的 token，也會保留自己的定義。p(4) 這類直接值函式與 (padding:1rem) 這類原生宣告，可以不查找 token 就直接接受值。

另見 token 註冊與解析, utility 定義, 宣告形式 與 建立主題.