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 つのまとまりで構成され、基礎から実践へ順に進みます。
| まとまり | テーマ | 章数 | 概要 |
|---|---|---|---|
| 基礎 | 哲学と環境 | 3 | はじめに / 環境構築 / ユーティリティファースト |
| レイアウト | 配置の 3 本柱 | 3 | Flexbox / Grid / スペーシング |
| スタイリング | 見た目を整える | 4 | タイポグラフィ / カラー / 背景・ボーダー / サイジング・配置 |
| レスポンシブとインタラクション | 動きと変化 | 5 | レスポンシブ / 状態バリアント / ダークモード / コンテナクエリ / アニメーション |
| 応用 | 仕上げと実装 | 3 | カスタマイズ / コンポーネントパターン / 実践プロジェクト |
推奨される読み方
- 初学者: 上から順番に読み、各章のコードを実際に動かしながら進める
- 既習者 (v3 経験あり):
introduction.mdで v4 の変更点だけ確認し、以降は気になる章から - 辞書的に使いたい: 上の表から該当する章を直接開く
- プロジェクト型学習: 実践プロジェクト を写経し、必要な章を逆引きする
4 つの学習ガイドの棲み分け
本サイトには 4 つの体系学習ガイドがあります。本ガイドは CSS スタイリングの体系学習 に focus しています。
| 軸 | TypeScript Master Guide | React 入門 | Tailwind CSS ガイド (本ガイド) | Clean Code |
|---|---|---|---|---|
| Focus | 言語仕様 | フレームワーク | CSS スタイリング | 設計規範 |
| 段階 | 入門〜中級 | 入門〜中級 | 入門〜中級 | 中級以上 |
| 前提 | JS 基礎 | TS + JS | HTML/CSS 基礎 | 言語不問 |
| 例 | 「Mapped Type の使い方」 | 「useEffect の依存配列」 | 「@theme で色を追加」 | 「any を unknown + 型ガードに」 |
4 ガイドは 補完関係 にあります。型を TypeScript Master Guide で固め、UI を React 入門 で組み立て、スタイリングを 本ガイド で磨きます。そのうえでコード品質を Clean Code で底上げする、という流れが想定動線です。
前提知識
- 必須: 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 統合特化のパターンを学ぶ流れがおすすめです。
それでは はじめに から始めましょう。