Tailwind CSS v4対応｜現場でよく使う定番クラスだけを厳選一覧化してみた

Tailwind CSSについて調べていると、記事によって書き方がバラバラで「どれが今の正解なのか分からない」と感じたことはありませんか。特にTailwindはバージョン4への移行で設定方法が大きく変わったため、古い情報のまま覚えてしまうと、思わぬところでつまずいてしまいます。

この記事では、2026年時点の最新バージョンであるTailwind CSS v4系を前提に、実務でよく使う頻出クラスを「余白」「Flexbox」「Grid」「レスポンシブ指定」の観点から一覧表に整理しました。読み終える頃には、手元のプロジェクトですぐに使えるクラスの引き出しが増えているはずです。

Tailwind CSSは今どうなっているのか

Tailwind CSSは、あらかじめ用意された小さな役割を持つクラス（ユーティリティクラス）をHTMLに直接組み合わせて、CSSファイルをほとんど書かずにデザインを組み立てられるフレームワークです。ボタンやカードのような部品単位のクラスを提供するのではなく、余白や色、レイアウトといった1つ1つの性質に対応したクラスを組み合わせて使う点が特徴です。

2026年時点での安定版はバージョン4系（v4）です。v3系からv4系への移行では、内部エンジンがRust製の高速なものに刷新され、ビルド速度が大きく向上しました。あわせて、設定方法にも大きな変更が加わっています。

v3とv4の主な違い

特に押さえておきたいのは、設定ファイルの扱いです。以前はtailwind.config.jsというJavaScriptファイルにテーマ設定を書くのが基本でしたが、v4ではCSSファイル内に直接設定を書く「CSS-first」な方式が標準になりました。

v3時代の解説記事を参考にすると、tailwind.config.jsを編集する手順が書かれていることが多いですが、v4から新規に始める場合はCSSファイルに直接カスタム値を書くやり方が基本になる点を覚えておくとスムーズです。

v4のCSS-first設定の例

実際の記述イメージは、次のようになります。カスタムカラーやフォントを@themeブロックの中で変数として定義する形式です。

/* style.css */
@import "tailwindcss";

@theme {
  --color-brand: #2563eb;
  --font-display: "Noto Sans JP", sans-serif;
}

この設定により、HTML側ではbg-brandのように、定義した名前をそのままクラス名として利用できるようになります。設定ファイルとCSSファイルを行き来する必要がなくなるため、管理がシンプルになります。

よく使う余白クラス一覧（padding・margin・gap）

Tailwind CSSの基本中の基本が、余白を調整するクラスです。数字が大きくなるほど余白も広くなる、という規則性があるため、感覚的に扱いやすいのが特徴です。

数字は基本的に「0.25rem刻み」で増えていく設計になっており、p-1が0.25rem、p-4が1rem、p-8が2rem、というように対応しています。細かい数値を毎回覚える必要はなく、公式ドキュメントのスケール表を都度確認する形で問題ありません。

なお、marginは要素自身の外側の余白、gapはFlexやGridのコンテナ内で子要素同士に生まれる隙間という役割の違いがあります。カード同士の間隔を空けたいだけであれば、個々の要素にmarginを付けるより、親要素にgapを指定する方がシンプルで管理しやすくなります。

Flexboxでよく使うクラス一覧

横並び・縦並びのレイアウトや、要素の中央寄せを行いたい場合はFlexboxのクラスがよく使われます。

「中央に要素を配置したい」という要望に対しては、flex items-center justify-centerという組み合わせが定番です。この3つをセットで覚えておくだけでも、ボタンやアイコンの中央寄せといった場面でかなり応用が利きます。

Gridでよく使うクラス一覧

カード一覧やギャラリーのように、行と列を意識したレイアウトを組みたい場合はGridのクラスが適しています。

v4では、あらかじめ用意されていない列数（例えば15列など）を指定した場合でも、事前設定なしにそのまま反映される仕組みが取り入れられています。とはいえ、実務では3〜4列程度のレイアウトが使われる場面が多く、上記の基本クラスだけで大半のケースに対応できます。

レスポンシブ対応のブレークポイント指定

Tailwind CSSでは、クラス名の前に画面幅の条件（プレフィックス）を付けることで、レスポンシブデザインを簡単に実現できます。

使い方はシンプルで、「基本のクラス」＋「ブレークポイント付きのクラス」を並べて書くだけです。次の例は、スマホでは1列、タブレット以上では2列、デスクトップ以上では3列に切り替わるカードレイアウトです。

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div class="p-4 bg-white rounded-lg shadow">カード1</div>
  <div class="p-4 bg-white rounded-lg shadow">カード2</div>
  <div class="p-4 bg-white rounded-lg shadow">カード3</div>
</div>

Tailwindは「モバイルファースト」の考え方を採用しているため、プレフィックスなしのクラスが最小画面幅向けの指定になり、そこから画面が広がるにつれてmd:やlg:のクラスが上書きされていく、という順番で読み解くと理解しやすくなります。

コンテナクエリにも対応

v4以降では、画面幅ではなく親要素（コンテナ）の幅を基準にスタイルを切り替える「コンテナクエリ」の指定も、標準機能として使えるようになっています。@containerクラスを親要素に付け、子要素に@sm:のようなクラスを指定する形式です。サイドバーの有無によってレイアウトが変わるような、部分的なコンポーネント単位のレスポンシブ対応をしたい場合に活用できます。

導入前のチェックリスト

既存プロジェクトでTailwind CSSをアップデートする場合や、これから新規に導入する場合は、次の点を確認しておくと迷いにくくなります。

• プロジェクトが使っているTailwindのバージョン（v3系かv4系か）を確認したか
• v4を使う場合、tailwind.config.jsではなくCSSファイル内の@themeで設定する前提になっているか
• 参考にしている記事や書籍が、どのバージョンを前提に書かれているか確認したか
• 余白はmargin・padding・gapのどれを使うべきか整理できているか
• レイアウトはFlexboxとGridのどちらが適しているか判断できているか

特に注意したいのは、検索して出てくる情報がv3時代の書き方のままになっているケースが少なくない点です。tailwind.config.jsを編集する手順が出てきた場合は、自分のプロジェクトがv4かどうかを一度確認してから読み進めると、混乱を避けられます。バージョンごとの変更点は、必要に応じて公式サイトでも確認しておくと安心です。

公式ドキュメント：https://tailwindcss.com/docs

まとめ

Tailwind CSSはバージョン4への移行によって、設定方法がtailwind.config.jsからCSSファイル内の@theme記述へと大きく変わりました。一方で、p-4やflex、grid-cols-3といった日常的によく使うユーティリティクラスの考え方自体は、v3からv4になっても大きくは変わっていません。

まずは、この記事で紹介した余白・Flexbox・Grid・レスポンシブの基本クラスを手元のプロジェクトで実際に触ってみることをおすすめします。使いながら公式ドキュメントで細かい仕様を確認していくと、無理なく最新の書き方に慣れていけるはずです。