はじめに
Tailwind CSS v4 対応の体系学習ガイド全 18 章。ユーティリティファーストの考え方から、Flexbox/Grid・タイポグラフィ・カラー・レスポンシブ・ダークモード・コンテナクエリ・アニメーションまで。実践プロジェクトでランディングページを構築し、モダン CSS スタイリングを身につけます。
Tailwind CSS とは
Tailwind CSS v4 対応ガイドの導入章。ユーティリティファーストの考え方、従来 CSS フレームワークとの違い、CSS-First Configuration / Oxide エンジン / コンテナクエリ標準対応など v4 新機能の概要、本ガイド全体の構成を紹介します。
環境構築
Tailwind CSS v4 の開発環境を Vite / PostCSS / CLI / CDN の 4 通りでセットアップする手順。対応ブラウザ要件、VS Code 拡張 (Tailwind CSS IntelliSense)、Prettier プラグインによる class 並び替え、本番ビルドサイズの目安まで網羅。
ユーティリティファースト
Tailwind CSS の核心となるユーティリティファーストの思想を従来 CSS と比較しながら解説。クラス命名規則、4px ベースのスペーシングスケール、HTML 肥大化対策 (コンポーネント化 / @apply / @reference) まで体系的に整理します。
Flexbox レイアウト
Tailwind CSS で Flexbox レイアウトを構築する手順。flex コンテナの作成から flex-direction / flex-wrap / justify-content / align-items / gap / order までを表で整理し、ナビゲーションバー・カード・検索フォームの実装例で定着させます。
Grid レイアウト
CSS Grid を Tailwind CSS で活用する方法。grid-cols / grid-rows・col-span / row-span・place-items・grid-auto-flow・サブグリッド対応まで体系化し、ダッシュボード / カードギャラリー / 画像グリッドの実装で定着させます。
スペーシング
Tailwind CSS の 4px ベースのスペーシングシステム。padding / margin / gap / space-* / 論理プロパティ (ps/pe) を比較し、フルブリードレイアウトのための負マージンや v4 の任意値指定まで実践例で整理します。
タイポグラフィ
Tailwind CSS でテキストをスタイリングする手順。フォントサイズ (text-xs〜text-6xl) / weight / family / 行高さ / 字間 / 装飾 / 省略 (truncate, line-clamp) / 日本語フォントの考慮事項までを実践例で整理します。
カラーシステム
Tailwind CSS のカラーパレット (26 色 × 11 段階、v4.2 時点) と使い方。テキスト / 背景 / ボーダー / リング / 透明度 (color-mix の /N 記法) / v4 の oklch カラースペース / CSS 変数連携 (bg-(--my-color)) までを実践例で網羅。
背景・ボーダー・シャドウ
Tailwind CSS で背景 (グラデーション含む)・ボーダー・角丸 (border-radius)・シャドウ・リング (フォーカス)・アウトライン・分割線 (divide) を体系的に整理。カード/ボタン/ヒーローセクションなど UI 部品の実装例まで網羅。
サイジングと配置
Tailwind CSS で要素のサイズ (width / height / min-* / max-* / size-*)、配置 (static/relative/absolute/fixed/sticky)、z-index、object-fit、overflow、aspect-ratio を体系化。中央配置 3 パターン・固定ヘッダー・モーダル等の実装例も整理。
レスポンシブデザイン
Tailwind CSS のモバイルファーストアプローチによるレスポンシブ実装。sm/md/lg/xl/2xl のブレークポイント、max-* バリアント、v4 のカスタムブレークポイント、任意値ブラケット記法をナビ/ヒーロー/フッターの実装例で整理。
状態バリアント
Tailwind CSS の状態バリアント (hover / focus / focus-visible / focus-within / active / disabled / invalid / checked) とグループ (group-*) / ピア (peer-*) / 擬似クラス (first/last/odd/even)・擬似要素 (before/after) / has-* まで体系化。
ダークモード
Tailwind CSS の `dark:` バリアントによるダークモード実装。メディアクエリ / クラスベース / セレクターベース 3 方式の比較、FOUC 対策、推奨カラーマッピング、CSS 変数によるテーマカラー一元管理を実装例で網羅。
コンテナクエリ
Tailwind CSS v4 で標準サポートされたコンテナクエリの解説。`@container` の宣言、@3xs〜@7xl のコンテナブレークポイント、名前付きコンテナ、任意値 `@[500px]:` 記法、メディアクエリとの使い分けを実装例で整理。
アニメーション
Tailwind CSS のアニメーション実装。transition / duration / ease / delay の基本、scale / rotate / translate / skew の Transform、v4 の 3D トランスフォーム (perspective / rotate-x/y/z)、組み込み animate-* と motion-safe/reduce アクセシビリティを実装例で整理。
カスタマイズ
Tailwind CSS v4 の CSS-First Configuration の実践。`@theme` でカラー / フォント / スペーシング / ブレークポイント / シャドウ / アニメーションを CSS 内で定義し、`@utility` / `@custom-variant` / `@plugin` / `@layer` でテーマ拡張を実装します。
コンポーネントパターン
Tailwind CSS で再利用可能な UI コンポーネント (ボタン / カード / フォーム / ナビ / アラート / バッジ / ツールチップ / モーダル) を体系的に実装。アクセシビリティ (ARIA 属性) も整理し、本番品質のパターンを学びます。
実践プロジェクト
学んだ Tailwind CSS v4 の知識を統合し、SaaS ランディングページを構築する実践章。ヒーロー / 機能紹介 / 料金プラン / FAQ / CTA / フッターの全セクションを実装し、@theme + @keyframes でカスタムアニメーションも整備します。