Tailwind CSS ガイド
このガイドについて
Tailwind CSS v4 を基礎から実践まで体系的に学ぶ 全 18 章のガイドです。ユーティリティファーストの考え方から SaaS ランディングページの実装まで、連続した流れで学べます。
このガイドの特徴
- 段階的: 哲学 → 環境構築 → レイアウト → スタイリング → レスポンシブ → 応用の順で学べる
- v4 対応: 2025 年リリースの Tailwind CSS v4 (CSS-First Configuration / Oxide エンジン / Container Queries 標準対応) を前提
- コード例重視: 各章で HTML / CSS / TypeScript の実装例と「なぜそうするか」の解説
- 実践プロジェクト付き: 最終章で SaaS ランディングページを Hero / Features / Pricing / FAQ / CTA / Footer まで実装
ガイドの構造
学習の流れ
ガイドは 5 つのまとまりで構成され、基礎から実践へ順に進みます。
基礎 — 哲学と環境 (第 1-3 章)
| # | 章 | 概要 |
|---|---|---|
| 01 | Tailwind CSS とは | ユーティリティファーストの考え方と v4 の新機能 |
| 02 | 環境構築 | Vite / PostCSS / CLI / CDN の 4 通りのセットアップ |
| 03 | ユーティリティファーストの考え方 | 従来 CSS との比較と HTML 肥大化への対処 |
レイアウト — 配置の 3 本柱 (第 4-6 章)
| # | 章 | 概要 |
|---|---|---|
| 04 | Flexbox レイアウト | flex コンテナから justify / align / gap まで |
| 05 | Grid レイアウト | grid-cols / col-span / サブグリッド |
| 06 | スペーシング | 4px ベースの padding / margin / gap 設計 |
スタイリング — 見た目を整える (第 7-10 章)
| # | 章 | 概要 |
|---|---|---|
| 07 | タイポグラフィ | サイズ / weight / 行高 / 日本語フォントの考慮 |
| 08 | カラーシステム | パレット・透明度・oklch・CSS 変数連携 |
| 09 | 背景・ボーダー・シャドウ | グラデーション / 角丸 / リング / 分割線 |
| 10 | サイジングと配置 | width / height / position / z-index / overflow |
レスポンシブとインタラクション — 動きと変化 (第 11-15 章)
| # | 章 | 概要 |
|---|---|---|
| 11 | レスポンシブデザイン | モバイルファーストとブレークポイント設計 |
| 12 | 状態バリアント | hover / focus / group / peer / has-* |
| 13 | ダークモード | 3 方式の比較と FOUC 対策 |
| 14 | コンテナクエリ | v4 標準の @container とメディアクエリの使い分け |
| 15 | アニメーション | transition / transform / 3D / motion-safe |
応用 — 仕上げと実装 (第 16-18 章)
| # | 章 | 概要 |
|---|---|---|
| 16 | カスタマイズ | @theme / @utility / @plugin によるテーマ拡張 |
| 17 | コンポーネントパターン | ボタン / カード / モーダル等を ARIA 付きで実装 |
| 18 | 実践プロジェクト | SaaS ランディングページを構築する |
推奨される読み方
- 初学者: 上から順番に読み、各章のコードを実際に動かしながら進める
- 既習者 (v3 経験あり):
introduction.mdで v4 の変更点だけ確認し、以降は気になる章から - 辞書的に使いたい: 上の表から該当する章を直接開く
- プロジェクト型学習: 実践プロジェクト を写経し、必要な章を逆引きする
学習ガイドの棲み分け
本ガイドは CSS スタイリングの体系学習 に focus しています。
| 連載 | Focus | 段階 | 前提 | 例 |
|---|---|---|---|---|
| JavaScript ガイド | 言語仕様 (JS) | 入門 | なし | 「アロー関数と this の挙動」 |
| TypeScript ガイド | 言語仕様 | 入門〜中級 | JS 基礎 | 「Mapped Types の使い方」 |
| React ガイド | フレームワーク | 入門〜中級 | HTML/CSS + JS 基礎 | 「useEffect の依存配列」 |
| Tailwind CSS ガイド (本ガイド) | CSS スタイリング | 入門〜中級 | HTML/CSS 基礎 | 「@theme で色を追加」 |
| クリーンコードガイド | 設計規範 | 中級以上 | TS 基礎 | 「any を unknown + 型ガードに」 |
| TypeScript デザインパターン | 設計カタログ | 中級以上 | TS + OOP 基礎 | 「Strategy は関数で足りるか」 |
各ガイドは 補完関係 にあります。言語の土台を JavaScript ガイドで固め、言語仕様を TypeScript ガイドで身につけます。その上で UI を React ガイドで組み立て、スタイリングを Tailwind CSS ガイドで磨きます。コード品質をクリーンコードガイドで底上げし、設計の選択肢を TypeScript デザインパターンで広げる、という流れが想定動線です。
前提知識
- 必須: HTML / CSS の基本 (セレクタ / class / display / flex / grid の概念)
- 推奨: Vite などのモダンビルドツールの基本理解 (
npm run devで dev server を起動できる) - 不要: PostCSS / Sass / CSS-in-JS の経験 (本ガイドではすべて Tailwind のユーティリティで完結)
React と組み合わせる場合は、本ガイドで Tailwind の体系を学んだ後に React ガイド — Tailwind CSS で clsx や variants 設計など React 統合特化のパターンを学ぶ流れがおすすめです。
それでは はじめに から始めましょう。