Tailwind CSS v4 チートシート（検索対応）

検索できるTailwind CSS v4チートシートです。クラス名や普通の言葉を入力すると、v4が生成する正確なCSSが表示されます。var(--spacing)の倍数からOKLCHのカラートークンまで対応し、@themeトークン、ブレークポイント、コンテナクエリ、動くflexとgridのボックス、全カラーパレット、ダークモード、v3からv4への名称変更も扱います。

2026年10月13日更新

このシートはTailwind CSS v4を対象としています（執筆時点の2026年10月の最新リリースはv4.3）。各クラスについて、v4が実際に書き出すCSSを示しています。v4では値の作り方が変わったため、これが重要です。余白は1つの--spacing変数の倍数になり、色はOKLCHで定義された--color-*変数になり、角丸、影、文字などのサイズは名前付きのテーマ変数から取得されます。ボックスに入力すると絞り込めます。クラス名、出力されるCSS、そして「center」「gradient」「sticky」のような普通の単語でも検索できます。

すべてのユーティリティを検索

表の読み方：初期値の--spacingは0.25remなので、calc(var(--spacing) * 4)は1remです。@themeでこの変数1つを変えれば、数値スケールを使うパディング、マージン、間隔、幅、高さがすべて一緒に変わります。生成されるCSSが長い場合（グラデーション、リング、トランジション）は、表では簡略版を示し、その旨を記載しています。

v4がクラスを値に変える仕組み

v4でユーティリティに値を与える方法は4つあり、どれを使っているかが分かれば、たいていの戸惑いは説明がつきます。

• 余白スケールの数値：p-4、w-64、gap-3。設定なしで任意の整数が使え、p-2.5のような0.25刻みも使えます。値はcalc(var(--spacing) * n)になります。
• 名前付きのテーマ値：rounded-lg、shadow-md、text-xl、max-w-md。それぞれ--radius-lgや--container-mdのような変数を読み取ります。
• 角かっこ内の任意値：p-[13px]、grid-cols-[200px_1fr]、bg-[#4f98fb]。アンダースコアは空白の代わりです。
• 丸かっこ内のCSS変数：bg-(--brand)はbg-[var(--brand)]のv4での短縮形です。v3ではbg-[--brand]と書いていました。

w-1/2のような分数はcalc(1/2 * 100%)になり、bg-black/50のような不透明度の接尾辞は透明色とのcolor-mix()になるため、どの色形式でも機能します。

@themeトークン（tailwind.config.jsに代わるv4の仕組み）

v4ではデザインシステムをCSSで設定します。@theme内で宣言した変数は、:root上のCSSカスタムプロパティになると同時に、ユーティリティクラスの元にもなります。変数の接頭辞によって、どのユーティリティに使われるかが決まります。

@import "tailwindcss";

@theme {
  --font-display: "Satoshi", sans-serif;   /* font-display */
  --color-brand-500: oklch(65% 0.17 255);  /* bg-brand-500, text-brand-500 ... */
  --breakpoint-3xl: 120rem;                /* 3xl: variant */
  --spacing: 0.25rem;                      /* p-4 = 1rem */
  --radius-card: 0.875rem;                 /* rounded-card */
}

名前空間	使われる先	例
--color-*	すべての色ユーティリティ（bg、text、border、fill、ring、影の色など）	bg-red-500
--spacing	パディング、マージン、間隔、幅、高さ、inset、translate	px-4
--font-*	フォントファミリー	font-sans
--text-*	フォントサイズ（任意で--text-*--line-heightも）	text-xl
--font-weight-*	フォントの太さ	font-bold
--tracking-* / --leading-*	字間／行の高さ	tracking-wide
--breakpoint-*	レスポンシブのバリアント	sm:*
--container-*	コンテナクエリのバリアントとmax-w-*	@sm:*, max-w-md
--radius-*	角丸	rounded-sm
--shadow-*, --inset-shadow-*, --drop-shadow-*	影	shadow-md
--blur-*	ぼかしと背景のぼかし	blur-md
--ease-* / --animate-*	タイミング関数／アニメーション	ease-out, animate-spin
--perspective-* / --aspect-*	3Dの遠近感／アスペクト比	perspective-near, aspect-video

既定の名前空間を丸ごと外すには、まず--color-*: initial;のようにinitialを設定し、そのあと自分の色だけを宣言します。JavaScriptの設定がまだある場合、v4は@config "./tailwind.config.js";で読み込めますが、corePlugins、safelist、separatorの各オプションはサポートされません。

ブレークポイント

ブレークポイントはモバイルファーストです。接頭辞のないクラスはすべての幅に適用され、md:flexは48rem以上で適用されます。v4は範囲構文width >= ...で出力します。

接頭辞	最小幅	CSS	それ未満（max-*）
sm:	40rem (640px)	@media (width >= 40rem)	max-sm: = @media (width < 40rem)
md:	48rem (768px)	@media (width >= 48rem)	max-md:
lg:	64rem (1024px)	@media (width >= 64rem)	max-lg:
xl:	80rem (1280px)	@media (width >= 80rem)	max-xl:
2xl:	96rem (1536px)	@media (width >= 96rem)	max-2xl:

重ねると範囲を指定できます。md:max-xl:flexは48rem以上80rem未満でのみ適用されます。一度きりのブレークポイントにはmin-[900px]:gridやmax-[600px]:hiddenを使います。ブレークポイントの追加や変更は@theme内の--breakpoint-*で行い、正しく並ぶようすべてremで統一しましょう。

コンテナクエリ

コンテナクエリはv4に組み込まれています（v3ではプラグインが必要でした）。親要素に@containerを付け、子要素を@sm:、@md:などでスタイル指定します。ウィンドウではなく親要素の幅に反応するため、サイドバーにも広いメイン列にも置くカードにぴったりです。

<div class="@container">
  <article class="flex flex-col @md:flex-row gap-4">
    <img class="w-full @md:w-48 rounded-lg" src="..." alt="">
    <div>...</div>
  </article>
</div>

バリアント	コンテナ幅	バリアント	コンテナ幅
@3xs	16rem (256px)	@2xl	42rem (672px)
@2xs	18rem (288px)	@3xl	48rem (768px)
@xs	20rem (320px)	@4xl	56rem (896px)
@sm	24rem (384px)	@5xl	64rem (1024px)
@md	28rem (448px)	@6xl	72rem (1152px)
@lg	32rem (512px)	@7xl	80rem (1280px)
@xl	36rem (576px)

それぞれ@container (width >= ...)にコンパイルされます。「それ未満」には@max-md:を使い、範囲には@sm:@max-md:のように重ね、@container/sidebarでコンテナに名前を付けて@md/sidebar:で指定し、@min-[475px]:のような任意のサイズも使えます。コンテナのサイズはブレークポイントと同じ数値ではない点に注意してください。@mdは28remですが、md:は48remです。

flexとgridのクイックリファレンス

下でレイアウトを選ぶと、ボックスが動きます。クリックに合わせてクラス文字列が更新されるので、そのままマークアップにコピーできます。

最もよく使うパターン：

目的	クラス
ブレークポイントなしのレスポンシブなカードグリッド	grid grid-cols-[repeat(auto-fill,minmax(16rem,1fr))] gap-6
サイドバーとコンテンツ	grid md:grid-cols-[16rem_1fr] gap-8
短いページで下端に固定するフッター	ラッパーにflex min-h-dvh flex-col、mainにflex-1
flexの行の中で省略表示されるテキスト	flexの子要素にmin-w-0、テキストにtruncate
モバイルでは縦積み、デスクトップでは横並び	flex flex-col md:flex-row gap-4
最後の要素を右端に寄せる	その要素にms-auto（またはml-auto）

既定のカラーパレット（OKLCH）、クリックでコピー

v4は既定のパレットをOKLCHで定義しており、広色域の画面ではより鮮やかな色を表示できます。下の各色見本は、Tailwind自身のテーマファイルにある正確な値で塗られています。クリックすると、そのoklch()値をコピーできます。濃淡は50から950まであります。*印の付いたパレット（mauve、olive、mist、taupe）はv4.2.0で追加されたため、それより前のv4リリースにはありません。黒と白は#000と#fffです。

bg-sky-500、text-sky-500/80のように使うか、自分のCSSではvar(--color-sky-500)として使います。組み合わせが読みやすいか確かめるにはカラーコントラストチェッカーを、同じ形式で独自のスケールを作るにはTailwindカラーパレットジェネレーターをお試しください。

v4のダークモード

初期設定では、dark:は@media (prefers-color-scheme: dark)を通じてOSの設定に従います。代わりにクラスや属性で切り替えたい場合（手動トグルなど）は、CSSで@custom-variantを使ってバリアントを上書きします。darkModeという設定キーはもうありません。

/* Class strategy: <html class="dark"> */
@custom-variant dark (&:where(.dark, .dark *));

/* Or a data attribute: <html data-theme="dark"> */
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

<div class="bg-white text-slate-900 dark:bg-slate-900 dark:text-slate-100">...</div>

手動トグルの場合は、ページが描画される前にクラスを設定します（<head>内に、保存された選択を読み取る小さなインラインスクリプトを置きます）。こうすれば、訪問者に違うテーマが一瞬表示されることはありません。3つ目の方法はdark:クラスをまったく使わないことです。@themeで--color-surfaceのような意味的なトークンを定義し、.darkの下で値を入れ替えれば、bg-surfaceのような1つのクラスが両方のテーマで機能します。

v3からv4へ：名前が変わったクラスと挙動が変わったクラス

以下は公式のアップグレードガイドに基づいています。古い名前もまだ存在し、何も警告せずに異なる（小さい）結果を出すため、名称変更が特に重要です。

v3	v4	理由
shadow-sm	shadow-xs	すべてのサイズに名前が付くよう、スケールが1段階下にずれた
shadow	shadow-sm	同じずれ
drop-shadow-sm / drop-shadow	drop-shadow-xs / drop-shadow-sm	同じずれ
blur-sm / blur	blur-xs / blur-sm	同じずれ（backdrop-blur-*も）
rounded-sm	rounded-xs	同じずれ
rounded	rounded-sm	同じずれ
outline-none	outline-hidden	v4のoutline-noneは本当にoutline-style: noneを設定するようになった
ring（3px、blue-500）	ring-3と色を指定	単独のringはcurrentColorの1pxになった
outline outline-2	outline-2	幅のユーティリティ自体がsolidスタイルを設定するようになった
bg-opacity-50（text-、border-、ring-、divide-、placeholder-opacityも）	bg-black/50	削除。スラッシュ修飾子を使う
flex-shrink-0 / flex-grow	shrink-0 / grow	エイリアスを削除
overflow-ellipsis	text-ellipsis	エイリアスを削除
decoration-slice / decoration-clone	box-decoration-slice / box-decoration-clone	エイリアスを削除
bg-[--brand]	bg-(--brand)	CSS変数の新しい短縮形
!bg-red-500	bg-red-500!	重要度指定は末尾に付ける（旧形式は非推奨）
first:*:pt-0	*:first:pt-0	重ねたバリアントは左から右へ読むようになった
tw-flex（接頭辞）	tw:flex	接頭辞はバリアントのような形になり、先頭に付く

名前は変わらず挙動だけが変わったもので、アップグレード時につまずきやすい点：

• ボーダーと区切り線の色：初期値がgray-200からcurrentColorに変わったため、単独のborderは濃く見えます。border-gray-200のように色を追加してください。
• タッチ画面でのホバー：hover:は@media (hover: hover)で囲まれるため、タップしてもホバースタイルが残らなくなりました。
• ボタン：Preflightはブラウザーと同じくボタンにcursor: defaultを設定するようになりました。指のカーソルにしたい場合はcursor-pointerを追加します。
• space-x / space-yとdivide：セレクターが> :not(:last-child)に変わり、マージンが末尾側に移りました。間隔がおかしい場合は、flexかgridとgapに切り替えましょう。
• container：centerとpaddingのオプションはなくなりました。@utility container { margin-inline: auto; padding-inline: 2rem; }で拡張します。
• グラデーション：v4では線形グラデーションの名前がbg-linear-to-rになり、bg-radialとbg-conicが加わりました。
• ブラウザー：v4の対象はSafari 16.4+、Chrome 111+、Firefox 128+です。古いブラウザーをサポートする必要がある場合、アップグレードガイドはv3.4にとどまるよう勧めています。

公式のnpx @tailwindcss/upgradeツールが、ほとんどの名称変更を自動で処理します。きれいなブランチで実行して差分を確認しましょう。どのshadowクラスを同じ見た目のままにしたかったのかは、ツールには分からないためです。

このシートを印刷する

このページには印刷用スタイルがあります。検索ボックスとボタンは非表示になり、表は小さい文字に縮み、カラーグリッドは色見本をまとめて保ちます。多くのブラウザーでは、印刷ダイアログで「背景のグラフィック」をオンにしないと色見本が空白で印刷されます。先に表を絞り込むと表示中の行だけが印刷されるので、自分が使うユーティリティだけの1枚のシートをすばやく作れます。

同じprint:バリアントは自分のプロジェクトでも使えます。ナビゲーションにprint:hidden、薄い文字にprint:text-black、カードにprint:break-inside-avoidを付ければ、印刷したページが読みやすくなります。

関連情報

• CSSのボタンの状態：hover、focus-visible、active、disabledを素のCSSとTailwindで。
• トークンに割り当てる前にパレットを選ぶためのウェブサイトの配色。
• CSSグリッドジェネレーターと、コピーして使えるTailwindセクションのコンポーネントギャラリー。

よくある質問

Tailwind v4ではtailwind.config.jsはどこにありますか？

v4はCSSで設定します。@import "tailwindcss"でTailwindを読み込み、--color-brand-500や--breakpoint-3xlのようなデザイントークンを@themeブロック内で宣言します。JavaScriptの設定も@configディレクティブで読み込めますが、corePlugins、safelist、separatorの各オプションはサポートされません。

Tailwind v4の既定のブレークポイントは？

smは40rem（640px）、mdは48rem（768px）、lgは64rem（1024px）、xlは80rem（1280px）、2xlは96rem（1536px）です。モバイルファーストなので、md:flexは48rem以上で適用されます。ブレークポイント未満のスタイルにはmax-md:を使い、範囲を指定するにはmd:max-xl:のように重ねます。

v4にアップグレードしたら影や角丸が小さく見えるのはなぜ？

影、角丸、ぼかしのスケールが1段階下にずれたためです。v3のshadow-smはv4のshadow-xs、v3のshadowはv4のshadow-sm、v3のrounded-smはv4のrounded-xs、v3のroundedはv4のrounded-smに当たります。古い名前もコンパイルできるのでエラーにはならず、1段階小さいサイズが出力されるだけです。

v4でダークモードをシステム設定ではなくクラスで切り替えるには？

CSSに@custom-variant dark (&:where(.dark, .dark *));を追加します。すると、祖先要素にdarkクラスがあるときにdark:ユーティリティが適用されます。data属性を使いたい場合は、セレクターに[data-theme=dark]を使います。

Tailwind v4でコンテナクエリにプラグインは必要ですか？

いいえ。コンテナクエリは組み込まれています。親要素に@containerを付け、子要素に@sm:、@md:、@max-md:などのバリアントを使います。コンテナのサイズは@3xs（16rem）から始まり、ページのブレークポイントとは異なります。たとえば@mdは28remです。

Tailwind v4でp-4は何にコンパイルされますか？

padding: calc(var(--spacing) * 4)です。初期値の--spacingが0.25remなので1rem（既定のフォントサイズで16px）になります。余白スケールでは設定なしで任意の整数が使え、--spacingを変えればすべてが一度に拡縮されます。

表示

アイテムの配置

方向

折り返し

主軸

列数

交差軸

間隔

コピーしました

クラスをコピー

このチートシートを印刷

無料で始める · クレジットカード不要

関連: ガイド｜Webマーケティングと集客を学ぶ

• Tailwind CSSの色：デフォルトカラーパレット一覧
• Tailwind vs Bootstrap：同じセクションを2通りで構築
• チーム紹介ページの例
• 利用規約とプライバシーポリシーの違い
• サンクスページの例
• TOML vs YAML：同じ設定を3つの形式で比較
• リダイレクトが多すぎる：ループを見つけて解消する
• TypeScriptのクラス：各メンバーに誰がアクセスできるか

製品

• AI ホームページ作成ツール：作りたいサイトを普段の言葉で伝えるだけで、数分で公開
• ホワイトラベル プラットフォーム：自社ブランド、自社ドメイン、自社の利益で運営
• エンタープライズ：SSO、個別の SLA、専任サポート
• 開発者向け API：自社の SaaS にサイト生成機能を組み込み

ご利用いただける方

• 制作会社・代理店向け：自社ブランドで再販
• フリーランス向け：自分ブランドのビルダーを持つ
• ホスティング事業者向け：サービスにビルダーを追加
• SaaS プラットフォーム向け：API でサイト作成を組み込み
• スタートアップ向け
• 金融サービス向け
• 医療・ヘルスケア向け

機能

• ドラッグ＆ドロップエディター
• SEO ツール内蔵
• 独自ブランディング
• クライアント用ダッシュボード
• 再販向け請求管理（Stripe Connect）

リソース

• ブログ
• ヘルプセンター
• 無料ビジネスツール
• ホームページ テンプレート
• テンプレート集
• サイト事例
• ガイド
• 比較
• 代替サービス
• おすすめ
• レビュー
• 料金ガイド
• 用語集・ガイド
• 連携サービス
• 開発者向け
• ベンチマーク
• Windows アプリ

会社情報

• 会社概要
• 料金
• パートナープログラムに申し込む
• お問い合わせ
• 採用情報
• セキュリティ
• プライバシーポリシー
• 利用規約

サイトマップを見る