# CSS⇄Tailwind対応表

> CSSプロパティとTailwindユーティリティクラス・バリアントの対応表（Tailwind v4基準）。各プロパティの詳しい解説はリンク先を参照。

- URL: https://www.css-dictionary.com/tailwind/

## レイアウト・配置

### display（https://www.css-dictionary.com/property/display.md）

- `block` → display: block
- `inline-block` → display: inline-block
- `inline` → display: inline
- `hidden` → display: none
- 補足: flex / grid は display-flex・display-grid の項を参照。「hidden」がdisplay: noneに当たる点に注意（visibility: hiddenではない）。

### display: flex（https://www.css-dictionary.com/property/display-flex.md）

- `flex` → display: flex
- `inline-flex` → display: inline-flex

### display: grid（https://www.css-dictionary.com/property/display-grid.md）

- `grid` → display: grid
- `inline-grid` → display: inline-grid

### order（https://www.css-dictionary.com/property/order.md）

- `order-1` → order: 1
- `order-first` → order: -9999
- `order-last` → order: 9999
- 一般形: `order-{n}`
- 任意値: `order-[13]`

### container-type（https://www.css-dictionary.com/property/container-type.md）

- `@container` → container-type: inline-size
- 補足: 名前付きコンテナは @container/{name}。問い合わせる子側は @sm: / @md: などのコンテナバリアントを使う（container-queriesの項を参照）。

### subgrid（https://www.css-dictionary.com/property/subgrid.md）

- `grid-cols-subgrid` → grid-template-columns: subgrid
- `grid-rows-subgrid` → grid-template-rows: subgrid

### aspect-ratio（https://www.css-dictionary.com/property/aspect-ratio.md）

- `aspect-square` → aspect-ratio: 1 / 1
- `aspect-video` → aspect-ratio: 16 / 9
- `aspect-auto` → aspect-ratio: auto
- 任意値: `aspect-[4/3]`

### place-items（https://www.css-dictionary.com/property/place-items.md）

- `place-items-center` → place-items: center
- `place-items-start` → place-items: start
- `place-items-stretch` → place-items: stretch

### place-content（https://www.css-dictionary.com/property/place-content.md）

- `place-content-center` → place-content: center
- `place-content-between` → place-content: space-between

### flex-direction（https://www.css-dictionary.com/property/flex-direction.md）

- `flex-row` → flex-direction: row
- `flex-col` → flex-direction: column
- `flex-row-reverse` → flex-direction: row-reverse
- `flex-col-reverse` → flex-direction: column-reverse

### justify-content（https://www.css-dictionary.com/property/justify-content.md）

- `justify-start` → justify-content: flex-start
- `justify-center` → justify-content: center
- `justify-between` → justify-content: space-between
- `justify-end` → justify-content: flex-end
- 補足: safe対応はjustify-center-safe（v4.1+）。

### justify-items（https://www.css-dictionary.com/property/justify-items.md）

- `justify-items-start` → justify-items: start
- `justify-items-center` → justify-items: center
- `justify-items-stretch` → justify-items: stretch

### align-items（https://www.css-dictionary.com/property/align-items.md）

- `items-start` → align-items: flex-start
- `items-center` → align-items: center
- `items-end` → align-items: flex-end
- `items-baseline` → align-items: baseline
- `items-stretch` → align-items: stretch

### align-content（https://www.css-dictionary.com/property/align-content.md）

- `content-start` → align-content: flex-start
- `content-center` → align-content: center
- `content-between` → align-content: space-between

### flex-wrap（https://www.css-dictionary.com/property/flex-wrap.md）

- `flex-wrap` → flex-wrap: wrap
- `flex-nowrap` → flex-wrap: nowrap
- `flex-wrap-reverse` → flex-wrap: wrap-reverse

### flex (grow/shrink/basis)（https://www.css-dictionary.com/property/flex-grow-shrink-basis.md）

- `flex-1` → flex: 1 1 0%
- `flex-auto` → flex: 1 1 auto
- `flex-none` → flex: none
- `grow` → flex-grow: 1
- `shrink-0` → flex-shrink: 0
- `basis-1/2` → flex-basis: 50%
- 補足: 「画像が潰れる」対策の flex-shrink: 0 は shrink-0。

### grid-template-columns（https://www.css-dictionary.com/property/grid-template-columns.md）

- `grid-cols-3` → grid-template-columns: repeat(3, minmax(0, 1fr))
- `grid-cols-none` → grid-template-columns: none
- 一般形: `grid-cols-{n}`
- 任意値: `grid-cols-[200px_1fr]`

### grid-template-columns: repeat（https://www.css-dictionary.com/property/grid-auto-fit-fill.md）

- 任意値: `grid-cols-[repeat(auto-fit,minmax(120px,1fr))]`
- 補足: auto-fit / auto-fill 専用のユーティリティは無く、任意値で書く。頻出ならテーマにカスタム登録する。

### position（https://www.css-dictionary.com/property/position.md）

- `static` → position: static
- `relative` → position: relative
- `absolute` → position: absolute
- `fixed` → position: fixed
- `sticky` → position: sticky

### z-index（https://www.css-dictionary.com/property/z-index.md）

- `z-10` → z-index: 10
- `z-50` → z-index: 50
- `z-auto` → z-index: auto
- `-z-10` → z-index: -10
- 一般形: `z-{n}`
- 任意値: `z-[999]`

### overflow（https://www.css-dictionary.com/property/overflow.md）

- `overflow-hidden` → overflow: hidden
- `overflow-x-auto` → overflow-x: auto
- `overflow-y-scroll` → overflow-y: scroll
- `overflow-clip` → overflow: clip

### inset（https://www.css-dictionary.com/property/inset.md）

- `inset-0` → inset: 0
- `inset-x-0` → inset-inline: 0
- `top-0` → top: 0
- `-top-4` → top: -16px
- 一般形: `inset-{n} / top-{n} / bottom-{n}（n×4px）`
- 任意値: `inset-[10%]`

### align-self（https://www.css-dictionary.com/property/align-self.md）

- `self-start` → align-self: flex-start
- `self-center` → align-self: center
- `self-end` → align-self: flex-end
- `self-stretch` → align-self: stretch

### justify-self（https://www.css-dictionary.com/property/justify-self.md）

- `justify-self-start` → justify-self: start
- `justify-self-center` → justify-self: center
- `justify-self-stretch` → justify-self: stretch

### grid-column（https://www.css-dictionary.com/property/grid-column.md）

- `col-span-2` → grid-column: span 2 / span 2
- `col-span-full` → grid-column: 1 / -1
- `col-start-2` → grid-column-start: 2
- 一般形: `col-span-{n} / col-start-{n}`

### grid-row（https://www.css-dictionary.com/property/grid-row.md）

- `row-span-2` → grid-row: span 2 / span 2
- `row-span-full` → grid-row: 1 / -1
- `row-start-1` → grid-row-start: 1
- 一般形: `row-span-{n} / row-start-{n}`

### position: sticky（https://www.css-dictionary.com/property/position-sticky.md）

- 一般形: `sticky + top-{n}（top等の指定が必須）`
- 補足: クラス自体は position の項の sticky。効かないときは祖先の overflow を疑う。

### Logical Properties（https://www.css-dictionary.com/property/logical-properties.md）

- 一般形: `ms-* / me-*（margin-inline-start/end）、ps-* / pe-*、start-* / end-*`
- 補足: v4は物理系ユーティリティ（mx-*等）の実体も論理プロパティ（margin-inline）で出力される。RTL対応はms-*/me-*を選ぶ。

### inset-inline（https://www.css-dictionary.com/property/inset-inline.md）

- `start-0` → inset-inline-start: 0
- `end-0` → inset-inline-end: 0
- 一般形: `start-{n} / end-{n}`

## レスポンシブ・関数

### @container（https://www.css-dictionary.com/property/container-queries.md）

- バリアント: `@sm: / @md: / @lg:` を先頭に付けて使う
- `@sm:flex-row` → @container (min-width: 24rem) { flex-direction: row }
- 補足: 親に @container を指定した上で使う。ビューポート基準の sm: とは別物。任意幅は @min-[420px]:。

### linear-gradient()（https://www.css-dictionary.com/property/linear-gradient.md）

- `bg-linear-to-r` → background-image: linear-gradient(to right, ...)
- `bg-linear-65` → background-image: linear-gradient(65deg, ...)
- 一般形: `from-{color} via-{color} to-{color} で色を指定`
- 補足: v4で bg-gradient-* から bg-linear-* に改名。補間色空間も指定可（bg-linear-to-r/oklch）。

### radial-gradient()（https://www.css-dictionary.com/property/radial-gradient.md）

- `bg-radial` → background-image: radial-gradient(...)
- `bg-radial-[at_25%_25%]` → background-image: radial-gradient(at 25% 25%, ...)
- 一般形: `from-{color} / to-{color} で色を指定`
- 補足: bg-radial / bg-conic はv4新設。v3にはユーティリティが無かった。

### @media (prefers-color-scheme)（https://www.css-dictionary.com/property/prefers-color-scheme.md）

- バリアント: `dark:` を先頭に付けて使う
- `dark:bg-gray-900` → @media (prefers-color-scheme: dark) { background-color: ... }
- 補足: v4のdark:は既定でprefers-color-scheme連動。クラス切り替え式（.darkを親に付ける）にするには@custom-variantで上書きする。

### @media (prefers-reduced-motion)（https://www.css-dictionary.com/property/prefers-reduced-motion.md）

- バリアント: `motion-reduce:` を先頭に付けて使う
- `motion-reduce:animate-none` → @media (prefers-reduced-motion: reduce) { animation: none }
- 補足: 逆条件（動きを減らす設定がOFFのときだけ動かす）は motion-safe:。

### color-mix()（https://www.css-dictionary.com/property/color-mix.md）

- 一般形: `bg-red-500/50 などの透明度修飾（内部でcolor-mix()が使われる）`
- 補足: color-mix()を直接書くユーティリティは無いが、v4の/50透明度記法やcurrentColor混色の実体はcolor-mix()。

### light-dark()（https://www.css-dictionary.com/property/light-dark.md）

- 任意値: `[color:light-dark(#1a1712,#fdfaf3)]`
- 補足: 専用ユーティリティは無い。Tailwindではdark:バリアントで書き分けるのが慣例（scheme-*の指定が前提）。

### oklch()（https://www.css-dictionary.com/property/oklch.md）

- 任意値: `bg-[oklch(0.65_0.2_25)]`
- 補足: v4の標準パレット自体がOKLCHで定義されている。任意値でもoklch()をそのまま使える。

## スペーシング・サイズ

### gap（https://www.css-dictionary.com/property/gap.md）

- `gap-2` → gap: 8px
- `gap-4` → gap: 16px
- 一般形: `gap-{n}（n×4px。gap-4 = 16px）`
- 任意値: `gap-[18px]`
- 補足: 行・列を別々に指定するときは gap-x-{n} / gap-y-{n}。

### padding（https://www.css-dictionary.com/property/padding.md）

- `p-4` → padding: 16px
- `px-4` → padding-inline: 16px
- `py-2` → padding-block: 8px
- `pt-2` → padding-top: 8px
- 一般形: `p-{n}（n×4px。p-4 = 16px）`
- 任意値: `p-[18px]`
- 補足: 論理プロパティ版は ps-{n}（padding-inline-start）/ pe-{n}（padding-inline-end）。

### margin（https://www.css-dictionary.com/property/margin.md）

- `m-4` → margin: 16px
- `mx-auto` → margin-inline: auto
- `mt-2` → margin-top: 8px
- `-mt-2` → margin-top: -8px
- 一般形: `m-{n}（n×4px。負の値は -m-{n}）`
- 任意値: `m-[18px]`

### width（https://www.css-dictionary.com/property/width.md）

- `w-full` → width: 100%
- `w-1/2` → width: 50%
- `w-fit` → width: fit-content
- `w-4` → width: 16px
- 一般形: `w-{n}（n×4px）`
- 任意値: `w-[52px]`

### height（https://www.css-dictionary.com/property/height.md）

- `h-full` → height: 100%
- `h-screen` → height: 100vh
- `h-dvh` → height: 100dvh
- `h-4` → height: 16px
- 一般形: `h-{n}（n×4px）`
- 任意値: `h-[52px]`
- 補足: モバイルのアドレスバー対策には h-dvh / h-svh / h-lvh。

### max-width（https://www.css-dictionary.com/property/max-width.md）

- `max-w-md` → max-width: 28rem（448px）
- `max-w-full` → max-width: 100%
- `max-w-none` → max-width: none
- 一般形: `max-w-{size}（xs〜7xl）`
- 任意値: `max-w-[720px]`

### min-width（https://www.css-dictionary.com/property/min-width.md）

- `min-w-0` → min-width: 0
- `min-w-full` → min-width: 100%
- `min-w-fit` → min-width: fit-content
- 補足: flexアイテムで省略（…）が効かないときの min-w-0 が頻出。

### box-sizing（https://www.css-dictionary.com/property/box-sizing.md）

- `box-border` → box-sizing: border-box
- `box-content` → box-sizing: content-box
- 補足: Preflight（リセットCSS）が全要素をborder-boxにするため、通常は書かない。

### scroll-margin（https://www.css-dictionary.com/property/scroll-margin.md）

- `scroll-mt-14` → scroll-margin-top: 56px
- 一般形: `scroll-m{t|b|s|e}-{n}（n×4px）`
- 任意値: `scroll-mt-[56px]`

### margin-inline（https://www.css-dictionary.com/property/margin-inline.md）

- `mx-4` → margin-inline: 16px
- `ms-4` → margin-inline-start: 16px
- `me-4` → margin-inline-end: 16px
- 一般形: `mx-{n} / ms-{n} / me-{n}`

### padding-inline（https://www.css-dictionary.com/property/padding-inline.md）

- `ps-4` → padding-inline-start: 16px
- `pe-4` → padding-inline-end: 16px
- 一般形: `px-{n} / ps-{n} / pe-{n}`
- 補足: px-* の実体はv4では padding-inline。

## その他

### CSS変数 (--property)（https://www.css-dictionary.com/property/css-custom-properties.md）

- 一般形: `bg-(--brand-color) のように (--変数名) でCSS変数を参照（v4）`
- 任意値: `[--gap:1rem]（任意のカスタムプロパティを定義）`
- 補足: v3の bg-[var(--brand)] 記法はv4で (--brand) に短縮された。テーマ変数は @theme で定義する。

### will-change（https://www.css-dictionary.com/property/will-change.md）

- `will-change-transform` → will-change: transform
- `will-change-auto` → will-change: auto
- 任意値: `will-change-[top,left]`

### contain（https://www.css-dictionary.com/property/contain.md）

- 任意値: `[contain:layout_paint]`
- 補足: 専用ユーティリティは無く任意値で書く。コンテナクエリ用途なら @container（container-typeの項）。

### @media（https://www.css-dictionary.com/property/media-queries.md）

- バリアント: `sm: / md: / lg: / xl:` を先頭に付けて使う
- `md:grid-cols-2` → @media (min-width: 48rem) { grid-template-columns: repeat(2, ...) }
- 補足: モバイルファースト（min-width基準）。上限側は max-md:、任意幅は min-[420px]:。

### table-layout（https://www.css-dictionary.com/property/table-layout.md）

- `table-fixed` → table-layout: fixed
- `table-auto` → table-layout: auto

### color-scheme（https://www.css-dictionary.com/property/color-scheme.md）

- `scheme-light` → color-scheme: light
- `scheme-dark` → color-scheme: dark
- `scheme-light-dark` → color-scheme: light dark
- 補足: scheme-* はv4新設。フォーム部品やスクロールバーの配色をOSテーマに追従させる。

### @layer（https://www.css-dictionary.com/property/cascade-layers.md）

- 一般形: `@layer theme, base, components, utilities（v4の内部構造）`
- 補足: v4自体がカスケードレイヤーの上に構築されている。自作CSSは @layer components 等に入れると詳細度の衝突を避けられる。

## アニメーション・エフェクト

### backdrop-filter（https://www.css-dictionary.com/property/backdrop-filter.md）

- `backdrop-blur-sm` → backdrop-filter: blur(8px)
- `backdrop-brightness-50` → backdrop-filter: brightness(0.5)
- 一般形: `backdrop-{filter}-{amount}`
- 任意値: `backdrop-blur-[2px]`
- 補足: v4でスケール名が変更: v3のbackdrop-blur→backdrop-blur-sm等（blurのリネームに追従）。

### filter（https://www.css-dictionary.com/property/filter.md）

- `blur-sm` → filter: blur(8px)
- `grayscale` → filter: grayscale(100%)
- `brightness-75` → filter: brightness(0.75)
- 一般形: `{filter}-{amount}（併記で複数フィルタを合成）`
- 任意値: `blur-[2px]`
- 補足: v4でスケール名が変更: v3のblur→blur-sm、blur-sm→blur-xsに改名。

### opacity（https://www.css-dictionary.com/property/opacity.md）

- `opacity-50` → opacity: 0.5
- `opacity-0` → opacity: 0
- 一般形: `opacity-{n}（0〜100）`
- 任意値: `opacity-[0.85]`
- 補足: 色だけ半透明にするなら bg-red-500/50 のような透明度修飾の方が適切。

### transition（https://www.css-dictionary.com/property/transition.md）

- `transition` → transition-property: color, background-color, border-color, opacity, transform など
- `transition-colors` → transition-property: color, background-color, border-color, ...
- `transition-none` → transition-property: none
- 一般形: `duration-{n}ms / ease-out / delay-{n}ms と組み合わせる`
- 補足: 所要時間の既定は150ms。v4ではtransition-behavior: allow-discreteを含む。

### transform（https://www.css-dictionary.com/property/transform.md）

- `scale-105` → scale: 1.05
- `rotate-45` → rotate: 45deg
- `translate-x-4` → translate: 16px 0
- `-translate-y-2` → translate: 0 -8px
- 一般形: `scale-{n} / rotate-{deg} / translate-{x|y}-{n}`
- 任意値: `translate-x-[5px]`
- 補足: v4は個別プロパティ（scale/rotate/translate）で出力される。v3のようなtransformクラスの前置は不要。

### animation（https://www.css-dictionary.com/property/animation.md）

- `animate-spin` → animation: spin 1s linear infinite
- `animate-pulse` → animation: pulse 2s ... infinite
- `animate-bounce` → animation: bounce 1s infinite
- `animate-none` → animation: none
- 任意値: `animate-[wiggle_1s_ease-in-out_infinite]`
- 補足: motion-reduce:animate-none の併記を推奨（prefers-reduced-motionの項を参照）。

### @keyframes（https://www.css-dictionary.com/property/keyframes.md）

- 一般形: `@theme { --animate-{name}: ...; @keyframes {name} { ... } } で登録`
- 補足: キーフレーム自体のユーティリティは無い。v4ではCSSの@theme内に定義すると animate-{name} が自動生成される。

### @starting-style（https://www.css-dictionary.com/property/at-starting-style.md）

- バリアント: `starting:` を先頭に付けて使う
- `starting:opacity-0` → @starting-style { opacity: 0 }
- 補足: v4新設。表示された瞬間からのエントリーアニメーションに使う。

### view-transition-name（https://www.css-dictionary.com/property/view-transition-name.md）

- 任意値: `[view-transition-name:card]`
- 補足: 専用ユーティリティは無く任意値で書く。

### animation-timeline（https://www.css-dictionary.com/property/animation-timeline.md）

- 任意値: `[animation-timeline:scroll()]`
- 補足: 専用ユーティリティは無く任意値で書く。スクロール駆動アニメーション用。

### interpolate-size（https://www.css-dictionary.com/property/interpolate-size.md）

- 任意値: `[interpolate-size:allow-keywords]`
- 補足: 専用ユーティリティは無く任意値で書く。height: auto へのアニメーションに必要。

## 背景・装飾

### object-fit（https://www.css-dictionary.com/property/object-fit.md）

- `object-cover` → object-fit: cover
- `object-contain` → object-fit: contain
- `object-fill` → object-fit: fill
- `object-scale-down` → object-fit: scale-down

### background-color（https://www.css-dictionary.com/property/background-color.md）

- `bg-white` → background-color: #fff
- `bg-red-500` → background-color: パレットのred-500
- `bg-transparent` → background-color: transparent
- 一般形: `bg-{color}-{shade}（/nで透明度）`
- 任意値: `bg-[#fdfaf3]`

### background-image（https://www.css-dictionary.com/property/background-image.md）

- `bg-none` → background-image: none
- 任意値: `bg-[url('/paper.png')]`
- 補足: グラデーションは bg-linear-* / bg-radial / bg-conic（linear-gradientの項を参照）。

### background-size（https://www.css-dictionary.com/property/background-size.md）

- `bg-cover` → background-size: cover
- `bg-contain` → background-size: contain
- `bg-auto` → background-size: auto
- 任意値: `bg-[length:200px_100px]`

### background-position（https://www.css-dictionary.com/property/background-position.md）

- `bg-center` → background-position: center
- `bg-top` → background-position: top
- `bg-left` → background-position: left
- 任意値: `bg-[position:20%_80%]`

### border（https://www.css-dictionary.com/property/border.md）

- `border` → border-width: 1px
- `border-2` → border-width: 2px
- `border-t` → border-top-width: 1px
- `border-dashed` → border-style: dashed
- 一般形: `色は border-{color}-{shade}`
- 補足: v4では border の既定色がcurrentColorに変更された（v3はgray-200）。色の明示を推奨。

### border-radius（https://www.css-dictionary.com/property/border-radius.md）

- `rounded-sm` → border-radius: 4px
- `rounded-md` → border-radius: 6px
- `rounded-lg` → border-radius: 8px
- `rounded-full` → border-radius: 9999px
- 任意値: `rounded-[10px]`
- 補足: v4でスケール名が変更: v3のrounded→rounded-sm、rounded-sm→rounded-xsに改名。角ごとの指定は rounded-t-* / rounded-tl-* など。

### box-shadow（https://www.css-dictionary.com/property/box-shadow.md）

- `shadow-sm` → box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), ...
- `shadow-md` → box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), ...
- `shadow-lg` → box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), ...
- `inset-shadow-sm` → box-shadow: inset ...
- 任意値: `shadow-[0_4px_12px_rgb(0_0_0_/_0.25)]`
- 補足: v4でスケール名が変更: v3のshadow→shadow-sm、shadow-sm→shadow-xsに改名。インセット影のinset-shadow-*はv4新設。

### accent-color（https://www.css-dictionary.com/property/accent-color.md）

- `accent-pink-500` → accent-color: パレットのpink-500
- 一般形: `accent-{color}-{shade}`

### list-style（https://www.css-dictionary.com/property/list-style.md）

- `list-none` → list-style-type: none
- `list-disc` → list-style-type: disc
- `list-decimal` → list-style-type: decimal
- `list-inside` → list-style-position: inside

### clip-path（https://www.css-dictionary.com/property/clip-path.md）

- 任意値: `[clip-path:polygon(50%_0,100%_100%,0_100%)]`
- 補足: 専用ユーティリティは無く任意値で書く。マスクは mask-* ユーティリティ（v4新設）がある。

### object-position（https://www.css-dictionary.com/property/object-position.md）

- `object-center` → object-position: center
- `object-top` → object-position: top
- 任意値: `object-[25%_75%]`

### mix-blend-mode（https://www.css-dictionary.com/property/mix-blend-mode.md）

- `mix-blend-multiply` → mix-blend-mode: multiply
- `mix-blend-screen` → mix-blend-mode: screen
- 一般形: `mix-blend-{mode}`

### background-blend-mode（https://www.css-dictionary.com/property/background-blend-mode.md）

- `bg-blend-multiply` → background-blend-mode: multiply
- `bg-blend-overlay` → background-blend-mode: overlay
- 一般形: `bg-blend-{mode}`

### isolation（https://www.css-dictionary.com/property/isolation.md）

- `isolate` → isolation: isolate
- `isolation-auto` → isolation: auto

### appearance（https://www.css-dictionary.com/property/appearance.md）

- `appearance-none` → appearance: none
- `appearance-auto` → appearance: auto

### outline（https://www.css-dictionary.com/property/outline.md）

- `outline-2` → outline-width: 2px
- `outline-offset-2` → outline-offset: 2px
- `outline-hidden` → 不可視アウトライン（forced-colors時のみ表示）
- `outline-none` → outline-style: none
- 補足: v4で旧outline-noneはoutline-hiddenに改名。新しいoutline-noneは本当にoutlineを消すので、フォーカスリングの代替を必ず用意する。

## テキスト・フォント

### color（https://www.css-dictionary.com/property/color.md）

- `text-gray-900` → color: パレットのgray-900
- `text-white` → color: #fff
- `text-red-500/50` → color: red-500を50%の透明度で
- 一般形: `text-{color}-{shade}（/nで透明度）`
- 任意値: `text-[#b0413e]`
- 補足: v4の標準パレットはOKLCHで定義されている。

### font-size（https://www.css-dictionary.com/property/font-size.md）

- `text-sm` → font-size: 0.875rem（14px）
- `text-base` → font-size: 1rem（16px）
- `text-xl` → font-size: 1.25rem（20px）
- 一般形: `text-{size}（xs〜9xl）`
- 任意値: `text-[15px]`
- 補足: text-sm/6 のように「サイズ/行の高さ」を同時指定できる。

### font-weight（https://www.css-dictionary.com/property/font-weight.md）

- `font-normal` → font-weight: 400
- `font-semibold` → font-weight: 600
- `font-bold` → font-weight: 700
- 一般形: `font-{weight}`
- 任意値: `font-[350]`

### line-height（https://www.css-dictionary.com/property/line-height.md）

- `leading-none` → line-height: 1
- `leading-tight` → line-height: 1.25
- `leading-relaxed` → line-height: 1.625
- `leading-6` → line-height: 24px
- 一般形: `leading-{n}（n×4px）`
- 任意値: `leading-[1.8]`

### letter-spacing（https://www.css-dictionary.com/property/letter-spacing.md）

- `tracking-tight` → letter-spacing: -0.025em
- `tracking-normal` → letter-spacing: 0
- `tracking-wide` → letter-spacing: 0.025em
- 任意値: `tracking-[0.2em]`

### text-align（https://www.css-dictionary.com/property/text-align.md）

- `text-left` → text-align: left
- `text-center` → text-align: center
- `text-right` → text-align: right
- `text-justify` → text-align: justify
- 補足: 書字方向対応の論理値は text-start / text-end。

### text-decoration（https://www.css-dictionary.com/property/text-decoration.md）

- `underline` → text-decoration-line: underline
- `line-through` → text-decoration-line: line-through
- `no-underline` → text-decoration-line: none
- 補足: 線の色・太さ・スタイルは decoration-{color} / decoration-2 / decoration-wavy。

### white-space（https://www.css-dictionary.com/property/white-space.md）

- `whitespace-nowrap` → white-space: nowrap
- `whitespace-pre` → white-space: pre
- `whitespace-pre-wrap` → white-space: pre-wrap

### text-overflow（https://www.css-dictionary.com/property/text-overflow.md）

- `truncate` → overflow: hidden + text-overflow: ellipsis + white-space: nowrap
- `text-ellipsis` → text-overflow: ellipsis
- `text-clip` → text-overflow: clip
- 補足: 1行省略は truncate 1つで3点セットが揃う。

### word-break（https://www.css-dictionary.com/property/word-break.md）

- `break-all` → word-break: break-all
- `break-keep` → word-break: keep-all
- 補足: 英単語の折り返しなら word-break ではなく break-words（overflow-wrap）が先。

### writing-mode（https://www.css-dictionary.com/property/writing-mode.md）

- 任意値: `[writing-mode:vertical-rl]`
- 補足: 専用ユーティリティは無く任意値で書く。縦書きは論理プロパティ（ms-*/ps-*等）との併用が前提。

### caret-color（https://www.css-dictionary.com/property/caret-color.md）

- `caret-pink-500` → caret-color: パレットのpink-500
- 一般形: `caret-{color}-{shade}`

### vertical-align（https://www.css-dictionary.com/property/vertical-align.md）

- `align-middle` → vertical-align: middle
- `align-top` → vertical-align: top
- `align-baseline` → vertical-align: baseline

### text-transform（https://www.css-dictionary.com/property/text-transform.md）

- `uppercase` → text-transform: uppercase
- `lowercase` → text-transform: lowercase
- `capitalize` → text-transform: capitalize
- `normal-case` → text-transform: none

### text-wrap（https://www.css-dictionary.com/property/text-wrap.md）

- `text-balance` → text-wrap: balance
- `text-pretty` → text-wrap: pretty
- `text-nowrap` → text-wrap: nowrap

### overflow-wrap（https://www.css-dictionary.com/property/overflow-wrap.md）

- `break-words` → overflow-wrap: break-word
- `wrap-anywhere` → overflow-wrap: anywhere
- 補足: wrap-anywhere / wrap-break-word はv4.1新設。

## インタラクション・UX

### cursor（https://www.css-dictionary.com/property/cursor.md）

- `cursor-pointer` → cursor: pointer
- `cursor-not-allowed` → cursor: not-allowed
- `cursor-help` → cursor: help
- 一般形: `cursor-{keyword}`

### visibility（https://www.css-dictionary.com/property/visibility.md）

- `visible` → visibility: visible
- `invisible` → visibility: hidden
- `collapse` → visibility: collapse
- 補足: invisible は visibility: hidden（領域は残る）。display: none は hidden（displayの項）。

### user-select（https://www.css-dictionary.com/property/user-select.md）

- `select-none` → user-select: none
- `select-text` → user-select: text
- `select-all` → user-select: all

### pointer-events（https://www.css-dictionary.com/property/pointer-events.md）

- `pointer-events-none` → pointer-events: none
- `pointer-events-auto` → pointer-events: auto

### content-visibility（https://www.css-dictionary.com/property/content-visibility.md）

- 任意値: `[content-visibility:auto]`
- 補足: 専用ユーティリティは無く任意値で書く。

### scroll-behavior（https://www.css-dictionary.com/property/scroll-behavior.md）

- `scroll-smooth` → scroll-behavior: smooth
- `scroll-auto` → scroll-behavior: auto
- 補足: motion-reduce:scroll-auto の併記を推奨。

### scroll-snap-type（https://www.css-dictionary.com/property/scroll-snap-type.md）

- `snap-x` → scroll-snap-type: x var(--tw-scroll-snap-strictness)
- `snap-mandatory` → --tw-scroll-snap-strictness: mandatory
- `snap-proximity` → --tw-scroll-snap-strictness: proximity
- 補足: snap-x snap-mandatory のように2つ重ねて使う。

### scroll-snap-align（https://www.css-dictionary.com/property/scroll-snap-align.md）

- `snap-start` → scroll-snap-align: start
- `snap-center` → scroll-snap-align: center
- `snap-align-none` → scroll-snap-align: none

### overscroll-behavior（https://www.css-dictionary.com/property/overscroll-behavior.md）

- `overscroll-contain` → overscroll-behavior: contain
- `overscroll-none` → overscroll-behavior: none

### resize（https://www.css-dictionary.com/property/resize.md）

- `resize` → resize: both
- `resize-y` → resize: vertical
- `resize-none` → resize: none

### scroll-snap（https://www.css-dictionary.com/property/scroll-snap.md）

- 一般形: `親に snap-x snap-mandatory、子に snap-start / snap-center`
- 補足: 構成要素は scroll-snap-type / scroll-snap-align の項を参照。

### field-sizing（https://www.css-dictionary.com/property/field-sizing.md）

- `field-sizing-content` → field-sizing: content
- `field-sizing-fixed` → field-sizing: fixed
- 補足: v4新設。入力に合わせて伸びるtextarea（UIレシピ集に実装例あり）。

## 擬似クラス

### :hover（https://www.css-dictionary.com/property/pseudo-hover.md）

- バリアント: `hover:` を先頭に付けて使う
- `hover:bg-red-700` → :hover { background-color: ... }
- 補足: v4のhover:は「ホバー可能なデバイス」でのみ有効（@media (hover: hover)内）。タッチデバイスでの疑似ホバー問題が仕様レベルで解決された。

### :nth-child()（https://www.css-dictionary.com/property/pseudo-nth-child.md）

- バリアント: `odd: / even: / nth-{n}:` を先頭に付けて使う
- `odd:bg-gray-50` → :nth-child(odd) { background-color: ... }
- 補足: nth-3: や nth-[3n+1]: のような指定もv4で可能。

### :nth-of-type()（https://www.css-dictionary.com/property/pseudo-nth-of-type.md）

- バリアント: `nth-of-type-{n}:` を先頭に付けて使う
- 補足: first-of-type: / last-of-type: もある。

### :first-child（https://www.css-dictionary.com/property/pseudo-first-child.md）

- バリアント: `first: / last: / only:` を先頭に付けて使う
- `first:border-t-0` → :first-child { border-top-width: 0 }

### :focus-visible（https://www.css-dictionary.com/property/pseudo-focus-visible.md）

- バリアント: `focus-visible:` を先頭に付けて使う
- `focus-visible:outline-2` → :focus-visible { outline-width: 2px }
- 補足: 単なるfocus:よりfocus-visible:推奨（マウスクリックではリングを出さない）。

### :has()（https://www.css-dictionary.com/property/pseudo-has.md）

- バリアント: `has-[...]: / has-checked:` を先頭に付けて使う
- `has-checked:bg-red-50` → :has(:checked) { background-color: ... }
- 補足: group-has-* で「親のhas状態」も参照できる。

### :user-valid / :user-invalid（https://www.css-dictionary.com/property/pseudo-user-valid.md）

- バリアント: `user-valid: / user-invalid:` を先頭に付けて使う
- `user-invalid:border-red-500` → :user-invalid { border-color: ... }
- 補足: v4新設のバリアント。invalid: と違い入力後にのみ発火する。

### :focus-within（https://www.css-dictionary.com/property/pseudo-focus-within.md）

- バリアント: `focus-within:` を先頭に付けて使う
- `focus-within:border-red-400` → :focus-within { border-color: ... }