CSS⇄Tailwind対応表

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

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

safe対応はjustify-center-safe（v4.1+）。

「画像が潰れる」対策の flex-shrink: 0 は shrink-0。

auto-fit / auto-fill 専用のユーティリティは無く、任意値で書く。頻出ならテーマにカスタム登録する。

クラス自体は position の項の sticky。効かないときは祖先の overflow を疑う。

v4は物理系ユーティリティ（mx-*等）の実体も論理プロパティ（margin-inline）で出力される。RTL対応はms-*/me-*を選ぶ。

行・列を別々に指定するときは gap-x-{n} / gap-y-{n}。

論理プロパティ版は ps-{n}（padding-inline-start）/ pe-{n}（padding-inline-end）。

モバイルのアドレスバー対策には h-dvh / h-svh / h-lvh。

flexアイテムで省略（…）が効かないときの min-w-0 が頻出。

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

px-* の実体はv4では padding-inline。

v3の bg-[var(--brand)] 記法はv4で (--brand) に短縮された。テーマ変数は @theme で定義する。

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

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

v4自体がカスケードレイヤーの上に構築されている。自作CSSは @layer components 等に入れると詳細度の衝突を避けられる。

v4でスケール名が変更: v3のbackdrop-blur→backdrop-blur-sm等（blurのリネームに追従）。

v4でスケール名が変更: v3のblur→blur-sm、blur-sm→blur-xsに改名。

色だけ半透明にするなら bg-red-500/50 のような透明度修飾の方が適切。

所要時間の既定は150ms。v4ではtransition-behavior: allow-discreteを含む。

v4は個別プロパティ（scale/rotate/translate）で出力される。v3のようなtransformクラスの前置は不要。

motion-reduce:animate-none の併記を推奨（prefers-reduced-motionの項を参照）。

キーフレーム自体のユーティリティは無い。v4ではCSSの@theme内に定義すると animate-{name} が自動生成される。

専用ユーティリティは無く任意値で書く。

専用ユーティリティは無く任意値で書く。スクロール駆動アニメーション用。

専用ユーティリティは無く任意値で書く。height: auto へのアニメーションに必要。

グラデーションは bg-linear-* / bg-radial / bg-conic（linear-gradientの項を参照）。

v4では border の既定色がcurrentColorに変更された（v3はgray-200）。色の明示を推奨。

v4でスケール名が変更: v3のrounded→rounded-sm、rounded-sm→rounded-xsに改名。角ごとの指定は rounded-t-* / rounded-tl-* など。

v4でスケール名が変更: v3のshadow→shadow-sm、shadow-sm→shadow-xsに改名。インセット影のinset-shadow-*はv4新設。

専用ユーティリティは無く任意値で書く。マスクは mask-* ユーティリティ（v4新設）がある。

v4で旧outline-noneはoutline-hiddenに改名。新しいoutline-noneは本当にoutlineを消すので、フォーカスリングの代替を必ず用意する。

v4の標準パレットはOKLCHで定義されている。

text-sm/6 のように「サイズ/行の高さ」を同時指定できる。

書字方向対応の論理値は text-start / text-end。

線の色・太さ・スタイルは decoration-{color} / decoration-2 / decoration-wavy。

1行省略は truncate 1つで3点セットが揃う。

英単語の折り返しなら word-break ではなく break-words（overflow-wrap）が先。

専用ユーティリティは無く任意値で書く。縦書きは論理プロパティ（ms-*/ps-*等）との併用が前提。

wrap-anywhere / wrap-break-word はv4.1新設。

v4で bg-gradient-* から bg-linear-* に改名。補間色空間も指定可（bg-linear-to-r/oklch）。

bg-radial / bg-conic はv4新設。v3にはユーティリティが無かった。

color-mix()を直接書くユーティリティは無いが、v4の/50透明度記法やcurrentColor混色の実体はcolor-mix()。

専用ユーティリティは無い。Tailwindではdark:バリアントで書き分けるのが慣例（scheme-*の指定が前提）。

v4の標準パレット自体がOKLCHで定義されている。任意値でもoklch()をそのまま使える。

invisible は visibility: hidden（領域は残る）。display: none は hidden（displayの項）。

専用ユーティリティは無く任意値で書く。

motion-reduce:scroll-auto の併記を推奨。

snap-x snap-mandatory のように2つ重ねて使う。

構成要素は scroll-snap-type / scroll-snap-align の項を参照。

v4新設。入力に合わせて伸びるtextarea（UIレシピ集に実装例あり）。

@sm:flex-row → @container (min-width: 24rem) { flex-direction: row }

親に @container を指定した上で使う。ビューポート基準の sm: とは別物。任意幅は @min-[420px]:。

md:grid-cols-2 → @media (min-width: 48rem) { grid-template-columns: repeat(2, ...) }

モバイルファースト（min-width基準）。上限側は max-md:、任意幅は min-[420px]:。

hover:bg-red-700 → :hover { background-color: ... }

v4のhover:は「ホバー可能なデバイス」でのみ有効（@media (hover: hover)内）。タッチデバイスでの疑似ホバー問題が仕様レベルで解決された。

odd:bg-gray-50 → :nth-child(odd) { background-color: ... }

nth-3: や nth-[3n+1]: のような指定もv4で可能。

first-of-type: / last-of-type: もある。

first:border-t-0 → :first-child { border-top-width: 0 }

focus-visible:outline-2 → :focus-visible { outline-width: 2px }

単なるfocus:よりfocus-visible:推奨（マウスクリックではリングを出さない）。

dark:bg-gray-900 → @media (prefers-color-scheme: dark) { background-color: ... }

v4のdark:は既定でprefers-color-scheme連動。クラス切り替え式（.darkを親に付ける）にするには@custom-variantで上書きする。

motion-reduce:animate-none → @media (prefers-reduced-motion: reduce) { animation: none }

逆条件（動きを減らす設定がOFFのときだけ動かす）は motion-safe:。

has-checked:bg-red-50 → :has(:checked) { background-color: ... }

group-has-* で「親のhas状態」も参照できる。

starting:opacity-0 → @starting-style { opacity: 0 }

v4新設。表示された瞬間からのエントリーアニメーションに使う。

user-invalid:border-red-500 → :user-invalid { border-color: ... }

v4新設のバリアント。invalid: と違い入力後にのみ発火する。

focus-within:border-red-400 → :focus-within { border-color: ... }