网站导航
设计令牌

令牌族

所有预设令牌族的类前缀、令牌命名空间与原生属性。

本页内容

令牌族连接类前缀、令牌命名空间以及它设置的 CSS 属性。这些表格列出预设注册的所有族，也包括没有预设值的族。

阅读族对照表

仅靠键无法识别令牌。在 p-md 中，p- 读取 spacing 命名空间，md 则选择 --spacing-md。相同的键用在其他族中，可能选择不同的令牌。

相同的键可以选择不同令牌

每行分别解析。重复出现的 md 是命名空间内的键，不是这些类共享的单一全局值。

文字说明
  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)  }}

每行依次表示前缀 → 令牌名称模式 → 原生属性。请用已注册的键替换 *。链接的值页面列出可用键；命名空间列指出该族接受哪些令牌。

调色板与颜色角色

前缀令牌命名空间属性
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

值见 调色板与颜色角色.

间距

前缀令牌命名空间属性
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

值见 间距.

容器尺寸

前缀令牌命名空间属性
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

值见 容器尺寸.

圆角

前缀令牌命名空间属性
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

值见 圆角.

阴影

前缀令牌命名空间属性
shadow---shadow-*box-shadow

值见 阴影.

字体

前缀令牌命名空间属性
font---font-family-*font-family
font---font-size-*font-size
font---font-weight-*font-weight

值见 字体.

文本

前缀令牌命名空间属性
text---text-*font-size, line-height, letter-spacing

值见 文本.

行高

前缀令牌命名空间属性
leading---leading-*line-height

值见 行高.

字距

前缀令牌命名空间属性
tracking---tracking-*letter-spacing

值见 字距.

动态效果

前缀令牌命名空间属性
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-* 各有独立的族。键必须能选出其中一个；如果同一个键存在于多个命名空间中，类就会有歧义，并且不会生成 CSS。

请在 @theme 中注册令牌。写在它外面的原生自定义属性不会注册键，新增命名空间也不会自动创建工具类族。新增族时，请定义对应的 @utility 模式。

--color-text-muted 属于 color 命名空间，键为 text-muted。颜色角色与调色板颜色使用相同的族，并不是独立的工具类命名空间。

本索引介绍会读取令牌的族。w-full 这类固定拼写即使遇到同键的令牌，也保留自身定义。p(4) 这类直接值函数与 (padding:1rem) 这类原生声明，可以不查找令牌就直接接受值。

另见 令牌注册与解析, 工具类定义, 声明形式 与 创建主题.