ナビゲーション
トークン

トークンファミリー

プリセットの全トークンファミリーについて、クラスの接頭辞、トークンの名前空間、ネイティブプロパティを確認できます。

このページの内容

トークンファミリーは、クラスの接頭辞、トークンの名前空間、書き込む 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 は、別々の名前空間にある同じキーです。矢印は検索とプロパティの対応を示しており、3 行の間の依存関係ではありません。図ではテーマ値とレイヤーのラッパーを省略していますが、下の生成例には両方が含まれます。
<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-* に対応する別々のファミリーがあります。キーはそのうち 1 つを選べなければなりません。複数の名前空間に同じキーがあると、クラスは曖昧になり CSS を出力しません。

トークンは @theme に登録します。その外側のネイティブカスタムプロパティはキーを登録せず、新しい名前空間もユーティリティファミリーを自動では作りません。ファミリーを追加する際には、対応する @utility パターンを定義します。

--color-text-muted は、キー text-muted として color 名前空間に属します。カラーロールはパレットの色と同じファミリーを使い、独立したユーティリティ名前空間ではありません。

この索引は、トークンを参照するファミリーを説明します。w-full のような固定の綴りは、同じキーのトークンがあっても自身の定義を保ちます。p(4) のような値を直接受け取る関数や、(padding:1rem) のようなネイティブ宣言は、トークンを検索せずに値を受け付けます。

関連項目： トークンの登録と解決, ユーティリティの定義, 宣言の形式 、 テーマの作成.