Tailwind CSSの使い方【初心者向け】レイアウト・カードUI・レスポンシブまで実践解説

Tailwind CSSを導入したものの、「結局どうやってUIを組めばいいの？」と手が止まっていませんか？

公式ドキュメントを開くとクラスが大量に並んでいて、「p-4？flex？md:？……どれをどう使えば、ちゃんとしたUIになるんだろう」と迷ってしまう。これは導入直後の人がほぼ全員ぶつかる壁です。

そもそもTailwind CSSは、「CSSを書く」のではなく「小さな役割を持つクラスを組み合わせてUIを作る」CSSフレームワークです。最初はクラス名の多さに圧倒されますが、実際によく使うクラスは限られています。だからこの記事では、その『よく使う型』だけに絞って解説します。

具体的には、まず余白・レイアウト・レスポンシブという土台の「型」を押さえます。そのうえで、ヘッダー・サイドバー・フッターを持つページの骨組み、ボタン・バッジ・メニューといった実戦パーツ、さらにプライマリ／セカンダリといった色の定義まで、一気に組めるようになることを目指します。最後は実際にプロフィールカードを組み、それをレスポンシブな3カラムに並べるところまで通しでやります。

まだ導入が済んでいない方は、先に RailsにTailwind CSS v4を導入する方法 を読んでから戻ってきてください。この記事は導入の「次の一歩」にあたる内容です。

Tailwind初心者は、まずこの5つだけ覚えればいい

結論から言うと、Tailwindのクラスを全部覚える必要はありません。膨大なクラスがありますが、私なら最初はこの5つだけに絞ります。

そして実は、この記事のサンプルも最後までこの5つ（＋色や角丸などの装飾）だけで組み立てています。「全部覚えないと使えない」わけではない、とまず安心してください。ここから1つずつ、手を動かしながら見ていきましょう。

Tailwind CSSの余白｜padding・margin・gapの使い方

UIの見た目を整える作業の大半は、実は「余白の調整」です。Tailwindの余白は 数字のスケールで決まっていて、1 = 0.25rem（4px）が基準。p-4 なら 4 × 4px = 16px のpaddingになります。

初心者がつまずきやすいのが「要素を等間隔に並べる」ところ。ひとつずつ margin を付けると最後の要素まで余白が付いて崩れがちですが、Tailwindなら親に space-y-3（縦並び）や gap-4（flex/grid）を付けるだけで、間だけにきれいな余白が入ります。

<!-- 親に space-y-3 を付けるだけで、項目の「間」だけに余白が入る -->
<ul class="space-y-3">
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

Tailwind CSSのレイアウト①｜flexで横並び・中央寄せを作る

「アイコンとテキストを横に並べたい」「ボタンを中央に置きたい」——この手のレイアウトはほぼ flex で解決します。親要素に flex を付けると、中の要素が横並びになります。

たとえば「左にアバター、右に名前」を縦中央でそろえたいなら、flex items-center の2つだけ。要素同士のすき間は gap-3 で入れます。

<div class="flex items-center gap-3">
  <img class="w-12 h-12 rounded-full" src="avatar.jpg" alt="">
  <div>山田 太郎</div>
</div>

「左にタイトル、右にボタン」のようなヘッダーは flex items-center justify-between が定番。この組み合わせは本当によく使うので、手が覚えるまで使い回しましょう。

Tailwind CSSのレイアウト②｜gridでカラム分割する

カードを3枚横に並べる、商品一覧を格子状に並べる——こうした「均等なカラム分割」は grid の出番です。親に grid grid-cols-3 を付ければ、中の要素が自動的に3等分されます。

flexとgridの使い分けに迷ったら、ざっくり「1次元（横一列 or 縦一列）に並べるならflex、2次元の格子に並べるならgrid」と覚えておけば、最初のうちはほぼ困りません。具体的には、こう考えるとほぼ迷いません。

<div class="grid grid-cols-3 gap-6">
  <div>カード1</div>
  <div>カード2</div>
  <div>カード3</div>
</div>

Tailwind CSSのレスポンシブ対応｜md:・lg:とモバイルファースト

「PCでは3カラム、スマホでは1カラムにしたい」。これもTailwindなら一瞬です。クラスの頭に md: や lg: というブレークポイントの接頭辞を付けるだけ。md:grid-cols-3 は「画面が中サイズ以上のときだけ3カラムにする」という意味になります。

ここで大事なのが モバイルファーストという考え方です。接頭辞なしのクラスが「スマホ含む全画面の基本スタイル」で、md: などは「その画面幅以上で上書きする」という足し算になります。だから「スマホで1カラム、PCで3カラム」は、基本を grid-cols-1 にして md:grid-cols-3 を足す、という書き方になります。

<!-- スマホ：1カラム / 768px以上：3カラム -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
  ...
</div>

Tailwind CSSの「utility-first」とは？クラスを組み合わせる考え方

ここまでで使ってきたように、Tailwindのクラスはひとつひとつが「ごく小さな1つのCSS」に対応しています。p-4 は「padding: 1rem」、flex は「display: flex」といった具合です。この小さな部品を積み重ねてデザインを作る考え方を utility-first と呼びます。

従来のCSSは、まず .card のような名前を考えて、別ファイルにスタイルを書いて……という往復が必要でした。Tailwindは、HTMLのその場でクラスを足すだけ。名前を考える・CSSファイルを行き来する・命名がかぶる、といった手間がまるごと消えます。

<!-- 従来のCSS：クラス名を決めて別ファイルにスタイルを書く -->
<div class="card">...</div>

<!-- Tailwind：その場で小さなクラスを積み重ねる -->
<div class="bg-white p-5 rounded-xl shadow-sm">...</div>

HTMLを見るだけで見た目を想像しやすくなるのも、Tailwindの大きなメリットです。理屈はこのくらいにして、ここからは少しレベルアップした実践に進みましょう。

Tailwind CSSで管理画面レイアウトを作る（ヘッダー・サイドバー・フッター）

基本の型がそろったので、ここで一気に「ページ全体の骨組み」を組んでみましょう。管理画面やダッシュボードでおなじみの、上にヘッダー・左にサイドバー・下にフッター・残りがメインコンテンツというレイアウトです。実はこれも、先ほどのflexの組み合わせだけで作れます。

<!-- 画面の高さいっぱいに、縦方向（ヘッダー→本体→フッター）で積む -->
<div class="min-h-screen flex flex-col">

  <!-- ヘッダー -->
  <header class="h-16 shrink-0 flex items-center justify-between px-6 bg-white border-b border-slate-200">
    <div class="font-bold text-slate-800">My App</div>
    <button class="text-sm text-slate-500 hover:text-slate-800">ログアウト</button>
  </header>

  <!-- 本体：サイドバー＋メインを横並び。flex-1 で残りの高さを埋める -->
  <div class="flex flex-1">
    <aside class="hidden md:block w-60 shrink-0 bg-slate-50 border-r border-slate-200 p-4">
      サイドバー
    </aside>
    <main class="flex-1 p-6">
      メインコンテンツ
    </main>
  </div>

  <!-- フッター -->
  <footer class="h-12 shrink-0 flex items-center justify-center text-sm text-slate-400 bg-white border-t border-slate-200">
    © 2026 My App
  </footer>
</div>

ポイントは3つです。まず一番外側を min-h-screen flex flex-col にして、ヘッダー・本体・フッターを縦に積み、画面の高さいっぱいに広げます。次に本体の <div> に flex flex-1 を付けて、サイドバーとメインを横並びにしつつ、余った高さを本体が埋めるようにします。最後にサイドバーは w-60 shrink-0 で幅を固定し、メインを flex-1 で残り全部にする——これだけで実用的なアプリの骨組みが完成します。

サイドバーに付けた hidden md:block にも注目してください。これは「スマホ（md未満）では非表示、中サイズ以上で表示」という意味で、狭い画面ではサイドバーを隠すという定番のレスポンシブ対応です。レスポンシブで覚えた接頭辞が、そのまま表示・非表示の切り替えにも使えるわけですね。

Tailwind CSSの実践例｜ボタン・バッジ・メニューを作る

ここからが本番です。実務で毎日のように作るボタン・バッジ・メニューを組んでいきましょう。色はまず標準カラー（indigo や slate）を使います。難しい設定は不要、コピペすればそのまま動きます。どれも「小さなクラスの組み合わせ」でできているのがわかるはずです。

ボタン：プライマリ・セカンダリ・アウトラインの3種

ボタンは「土台のクラスは共通で、色だけ変える」と考えると一気に作れます。共通の土台は px-4 py-2 rounded-lg text-sm font-medium。あとは塗り（プライマリ）・控えめ（セカンダリ）・枠線だけ（アウトライン）で見た目を出し分けます。

<div class="flex items-center gap-3">
  <!-- プライマリ：主役のアクション -->
  <button class="px-4 py-2 rounded-lg text-sm font-medium bg-indigo-500 text-white hover:bg-indigo-600">
    保存する
  </button>

  <!-- セカンダリ：補助のアクション -->
  <button class="px-4 py-2 rounded-lg text-sm font-medium bg-slate-100 text-slate-700 hover:bg-slate-200">
    キャンセル
  </button>

  <!-- アウトライン：枠線だけの控えめなボタン -->
  <button class="px-4 py-2 rounded-lg text-sm font-medium border border-slate-300 text-slate-700 hover:bg-slate-50">
    詳細を見る
  </button>
</div>

3つとも土台は同じで、変えているのは bg- と border- の部分だけ。これが「役割で色を分ける」感覚です。画面の中で一番やってほしい操作をプライマリ、それ以外をセカンダリやアウトラインにすると、自然とUIに優先順位が生まれます。

バッジ：ステータスを色で伝える

「公開中」「下書き」「エラー」のようなステータス表示に使う小さなラベルがバッジです。rounded-full で丸く、薄い背景（bg-xxx-100）＋濃い文字（text-xxx-700）のペアにするのが定番。色を変えるだけで意味を出し分けられます。

<div class="flex items-center gap-2">
  <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">公開中</span>
  <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-700">下書き</span>
  <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-700">エラー</span>
</div>

inline-flex items-center を付けておくと、テキストの横にアイコンや「●」を置いてもきれいに中央でそろいます。px-2.5 py-0.5 という小さめの余白がバッジらしさのコツです。

メニュー：サイドバーのナビゲーション

先ほどのサイドバーの中身を作りましょう。「アイコン＋ラベル」を縦に並べ、いま開いているページ（アクティブな項目）だけ色を変えるのが基本形です。flex（横並び）と余白の space-y- がそのまま効きます。

<nav class="space-y-1">
  <!-- アクティブな項目：色をうっすら敷く -->
  <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg bg-indigo-50 text-indigo-600 font-medium">
    <svg class="w-5 h-5 shrink-0" fill="currentColor" viewBox="0 0 20 20"><circle cx="10" cy="10" r="8" /></svg>
    ダッシュボード
  </a>

  <!-- 通常の項目：ホバーでうっすら背景 -->
  <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-600 hover:bg-slate-100">
    <svg class="w-5 h-5 shrink-0" fill="currentColor" viewBox="0 0 20 20"><circle cx="10" cy="10" r="8" /></svg>
    メンバー
  </a>

  <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-600 hover:bg-slate-100">
    <svg class="w-5 h-5 shrink-0" fill="currentColor" viewBox="0 0 20 20"><circle cx="10" cy="10" r="8" /></svg>
    設定
  </a>
</nav>

アクティブ項目は bg-indigo-50（うっすら薄い背景）＋ text-indigo-600（濃い文字）の組み合わせで、選択中だとひと目でわかるようにしています。通常項目は hover:bg-slate-100 でマウスを乗せたときだけ反応。アイコンに付けた shrink-0 は「文字が長くてもアイコンを潰さない」ためのおまじないです。

Tailwind CSSでカードUIを作る（プロフィールカード実践）

基本もパーツもそろったので、最後にそれらを組み合わせて1つのUIを完成させましょう。題材は、現場でも定番のプロフィールカードです。まずゴール（完成形）をお見せします。これを4ステップで組み立てていきます。

<!-- これを作ります（完成形） -->
<div class="bg-white p-5 rounded-xl shadow-sm border border-slate-200">
  <div class="flex items-center gap-4">
    <img class="w-16 h-16 rounded-full" src="avatar.jpg" alt="山田太郎">
    <div>
      <div class="text-lg font-bold text-slate-800">山田 太郎</div>
      <div class="text-sm text-slate-500">フロントエンドエンジニア</div>
    </div>
  </div>
  <button class="mt-4 w-full py-2 rounded-lg bg-indigo-500 text-white text-sm font-medium hover:bg-indigo-600">
    フォローする
  </button>
</div>

「これだけのクラスで、ちゃんとしたカードになるの？」——なります。器（カード）・flexでの横並び・ボタンと、ここまで覚えた要素が全部つながっています。では分解して、ひとつずつ積み上げていきましょう。

STEP1：器（カード）を作る

まずは中身を入れる「箱」から。白背景・余白・角丸・うっすら影・細い枠線——この組み合わせがカードの基本形です。

<div class="bg-white p-5 rounded-xl shadow-sm border border-slate-200">
  ここに中身を入れていく
</div>

bg-white（白背景）、p-5（内側の余白）、rounded-xl（角丸）、shadow-sm（控えめな影）、border border-slate-200（薄いグレーの枠線）。これだけで「カードらしい器」になります。色に slate（青みがかったグレー）を使うのは、実務でも広く使われる落ち着いた配色です。

STEP2：アバターと名前を横に並べる

器の中に、flex（横並び）でアバターとテキストを横に並べます。アバターは rounded-full で正円に。

<div class="bg-white p-5 rounded-xl shadow-sm border border-slate-200">
  <div class="flex items-center gap-4">
    <img class="w-16 h-16 rounded-full" src="avatar.jpg" alt="山田太郎">
    <div>
      <div class="text-lg font-bold text-slate-800">山田 太郎</div>
      <div class="text-sm text-slate-500">フロントエンドエンジニア</div>
    </div>
  </div>
</div>

w-16 h-16 でアバターを64px四方に、text-lg font-bold で名前を大きく太く、text-sm text-slate-500 で肩書きを小さく薄いグレーに。文字サイズと色の濃淡だけで情報の優先順位が伝わるのがわかると思います。

STEP3：ボタンを足して仕上げる

最後にアクセントカラーのボタンを追加します。ここでは標準カラーの indigo を使います。hover: を付けると、マウスを乗せたときの色も指定できます。これで冒頭の完成形と同じものができあがりです。

<div class="bg-white p-5 rounded-xl shadow-sm border border-slate-200">
  <div class="flex items-center gap-4">
    <img class="w-16 h-16 rounded-full" src="avatar.jpg" alt="山田太郎">
    <div>
      <div class="text-lg font-bold text-slate-800">山田 太郎</div>
      <div class="text-sm text-slate-500">フロントエンドエンジニア</div>
    </div>
  </div>
  <button class="mt-4 w-full py-2 rounded-lg bg-indigo-500 text-white text-sm font-medium hover:bg-indigo-600">
    フォローする
  </button>
</div>

mt-4 でボタンの上に余白、w-full で横いっぱいに、bg-indigo-500 と hover:bg-indigo-600 でホバー時に少し濃く。ここまで一度もCSSファイルを開いていません——これがTailwindの手触りです。

STEP4：カードを3枚、レスポンシブに並べる

カードができたら、gridとレスポンシブ（md:）を組み合わせて並べます。スマホでは縦1列、PCでは横3列です。

<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
  <!-- STEP3のカードを3つ並べる -->
  <div class="bg-white p-5 rounded-xl shadow-sm border border-slate-200">...</div>
  <div class="bg-white p-5 rounded-xl shadow-sm border border-slate-200">...</div>
  <div class="bg-white p-5 rounded-xl shadow-sm border border-slate-200">...</div>
</div>

ブラウザの幅を縮めたり広げたりすると、1カラムと3カラムが切り替わるはずです。grid-cols-1 md:grid-cols-3 のたった2クラスでレスポンシブが完成しました。メディアクエリを手書きしていた頃を思うと、ずいぶん身軽になったと感じませんか？

【実務向け】Tailwind CSSの色設計｜@themeでプライマリ／セカンダリを定義

ここまでは bg-indigo-500 のような標準カラーだけで組んできました。学習中やひとりで作るうちは、これで十分です。まずは難しく考えず標準色で組んでみてください。

ただ、チーム開発やデザイン統一が必要になると、indigo-500 をボタンのたびに書く方式は「ブランドカラーを変えたいとき全箇所を置換する羽目」になります。そこで一歩進んで、色に「プライマリ（主役）」「セカンダリ（補助）」という役割の名前を付けておくのが実務の定石です。

Tailwind v4 では、CSSファイルに @theme を書くだけで自分の色を定義できます。設定ファイル（tailwind.config.js）はもう必須ではありません。

@import "tailwindcss";

@theme {
  --color-primary: #6366f1;        /* 主役のアクション色（indigo相当） */
  --color-primary-dark: #4f46e5;   /* ホバー時に少し濃くする用 */
  --color-secondary: #64748b;      /* 補助的なアクション（slate相当） */
}

こう書くだけで、Tailwindが bg-primary / text-primary / border-primary / hover:bg-primary-dark といったクラスを自動で生成してくれます。あとは、これまで indigo-500 と書いていたところを primary に置き換えるだけです。

<!-- 標準カラー（最初はこれでOK） -->
<button class="px-4 py-2 rounded-lg bg-indigo-500 text-white hover:bg-indigo-600">保存する</button>

<!-- @theme で primary を定義したあと（実務向け） -->
<button class="px-4 py-2 rounded-lg bg-primary text-white hover:bg-primary-dark">保存する</button>

色を変えたくなったら、@theme の数値を1か所書き換えるだけで全画面に反映されます。「最初は標準色 → デザイン統一が必要になったら @theme に切り出す」という順番で十分です。焦って最初から使う必要はありません。

Tailwind CSSのよく使うクラス早見表

最後に、この記事で出てきた「まず覚えるべきクラス」をカテゴリ別にまとめておきます。最初はこれだけでも十分にUIが組めます。

Tailwind CSSのチートシート・VSCode拡張機能

クラス名は最初から覚えようとしなくて大丈夫です。「調べながら書く」前提で環境を整える方が、結局いちばん早く身につきます。最後に、Tailwindを書くときに手放せなくなる定番ツールを紹介します。

チートシート・リファレンス

• Tailwind CSS Cheat Sheet（nerdcave） — 全ユーティリティを「これは結局どのCSSになるのか」付きで一覧できる定番。「あの余白のクラス、なんだっけ？」を秒で解決できます。
• 公式ドキュメント — 検索（/ キー）が優秀。クラス名の一部を入れれば該当ページに飛べます。一次情報なので、バージョン差で迷ったら必ずここを見ます。

VSCodeのおすすめ拡張

• Tailwind CSS IntelliSense（Tailwind Labs公式）— これは必須級です。クラス名の補完・色のプレビュー・ホバーで実際のCSSを表示してくれます。bg- と打つだけで候補がずらりと出るので、暗記の負担がほぼ消えます。
• Prettier＋prettier-plugin-tailwindcss — 並び順がバラバラになりがちなクラスを、Tailwindの推奨順に自動で並べ替えてくれます。チームで書くときに差分がきれいになります。
• Headwind — Prettierを使わない場合のクラス並べ替え拡張。役割は近いので、どちらか一方でOKです。

とくに Tailwind CSS IntelliSense だけは最初に入れておくことを強くおすすめします。これがあるかないかで、書き心地がまるで変わります。

Tailwind CSSとBootstrapの違いは？どっちを使うべき？

CSSフレームワークというと Bootstrap を思い浮かべる方も多いですよね。「結局どっちを使えばいいの？」とよく聞かれるので、ざっくり整理しておきます。

乱暴にまとめると、「ありものの管理画面を最速で立ち上げたいならBootstrap、デザインを自分で作り込みたいならTailwind」です。Bootstrapは「btn btn-primary と書けばボタンが出る」手軽さが魅力ですが、その分どのサイトも似た見た目になりがち。Tailwindは少し手間がかかる代わりに、「人と被らないUIを、CSSを直接書かずに作れる」のが強みです。デザインにこだわりたい・他と差をつけたいなら、Tailwindを選ぶ価値は十分にあります。

Tailwind CSSをもっと学ぶ：関連記事

この記事で「使い方の全体像」をつかんだら、次は用途ごとに深掘りしていきましょう。当ブログのTailwind関連記事をまとめておきます。

• RailsにTailwind CSS v4を導入する方法 — そもそもの導入手順。これからRailsに入れる方はここから。
• Tailwind CSSのgroup-hover完全解説｜ネスト（入れ子）する方法も紹介 — 「親にマウスを乗せたら子の見た目を変える」など、hover: の一歩先のテクニック。
• macOSにRuby on Railsをインストール — そもそものRails開発環境づくりから始めたい方へ。

まとめ｜Tailwind CSSは「型」だけ覚えればいい

Tailwindの使い方は、クラスを全部暗記することではありません。最初に挙げた5つ（余白・flex・grid・md:・hover:）さえ押さえれば、ヘッダー・サイドバー・フッターのページ骨組みも、ボタン・バッジ・メニューといったパーツも、すべて同じ「小さなクラスを積み木のように組み合わせる」発想で作れます。色も、慣れてきたら @theme で primary / secondary と意味づけすれば、後からまとめて変えられます。

まずは手元のプロジェクトで、ボタンやバッジのような小さな部品をTailwindで組み直してみてください。Tailwind CSS IntelliSense を入れて、チートシートを片手に書けば、「自分でCSSを書かずに済む」感覚は実際に手を動かすと一気に腑に落ちます。

慣れてきたら、hover: よりも一歩進んだ「親要素にマウスを乗せたら子要素のスタイルを変える」といったテクニックも使えるようになります。次のステップとして Tailwind CSSのgroup-hover完全解説｜ネスト（入れ子）する方法も紹介 を読むと、表現の幅がぐっと広がりますよ。RailsプロジェクトでまだTailwindを入れていない方は、RailsにTailwind CSS v4を導入する方法 からどうぞ。

スポンサーリンク