メインコンテンツまでスキップ

Tailwind CSS とは

Tailwind CSS は、ユーティリティファーストの CSS フレームワークです。本ガイドでは、Tailwind CSS v4 の新機能を含めたガイドをお届けします。

Tailwind CSS の特徴​

ユーティリティファースト​

従来の CSS フレームワーク (Bootstrap など) は、事前定義されたコンポーネントを提供します。一方、Tailwind CSS は低レベルのユーティリティクラスを提供し、それらを組み合わせてデザインを構築します。

<!-- 従来のアプローチ -->
<button class="btn btn-primary">ボタン</button>

<!-- Tailwind CSS -->
<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
  ボタン
</button>

メリット​

メリット説明
高いカスタマイズ性あらゆるデザインを自由に実現
一貫性事前定義されたスケール（spacing・色・サイズ）から選ぶため統一感が出る
開発速度HTML を離れずにスタイリング
小さなバンドルサイズ使用クラスのみが出力される

デメリット​

デメリット対策
HTML が長くなるコンポーネント化で解決
学習コスト規則的な命名で習得しやすい
初期設定v4 で大幅に簡素化

Tailwind CSS v4 の新機能​

2025 年 1 月にリリースされた v4 では、多くの改善が行われました。

CSS-First Configuration​

v3 までの JavaScript 設定ファイルに代わり、CSS で直接設定できるようになりました。

/* v4: CSS で設定 */
@import "tailwindcss";

@theme {
  --color-brand: #3b82f6;
  --font-display: "Inter", sans-serif;
}

Oxide エンジン​

新しい Oxide エンジンにより、ビルド速度が大幅に向上しました。

動的ユーティリティ値​

spacing スケールに沿う整数値を角括弧なしで指定できるようになりました（100px のような固定単位は従来どおり角括弧で指定します）。

<!-- v3: 任意の spacing 値は角括弧で指定 -->
<div class="mt-[68px] gap-[52px]">...</div>

<!-- v4: spacing スケール上の整数は角括弧なしで指定できる (mt-17 = 17 × 0.25rem = 4.25rem) -->
<div class="mt-17 gap-13">...</div>

<!-- px などスケール外の固定単位は従来どおり角括弧 -->
<div class="h-[100px] z-[999]">...</div>

コンテナクエリのビルトインサポート​

プラグインなしでコンテナクエリが使用可能です。

<div class="@container">
  <div class="@md:flex @lg:grid">...</div>
</div>

3D トランスフォーム​

3D 変換のユーティリティが追加されました。

<div class="rotate-x-45 rotate-y-30 translate-z-10">...</div>

oklch カラーパレット​

より鮮やかな色を表現できる oklch カラースペースを採用。

本ガイドの構成​

本ガイドは次の 5 つのまとまりで、基礎から実践へ順に進みます。

基礎 (1〜3 章)​

  • Tailwind CSS の概要と環境構築
  • ユーティリティファーストの考え方

レイアウト (4〜6 章)​

  • Flexbox、Grid によるレイアウト
  • スペーシングシステム

スタイリング (7〜10 章)​

  • タイポグラフィ、カラー、背景、ボーダー
  • サイズとポジショニング

レスポンシブとインタラクション (11〜15 章)​

  • レスポンシブデザイン
  • 状態バリアント、ダークモード
  • コンテナクエリ、アニメーション

応用 (16〜18 章)​

  • カスタマイズと拡張
  • コンポーネント設計パターン
  • 実践プロジェクト

対象読者​

  • HTML/CSS の基本を理解している方
  • モダンな CSS スタイリングを学びたい方
  • 効率的なフロントエンド開発に興味がある方

前提知識​

  • HTML の基本的な構造
  • CSS の基本プロパティ (margin、padding、color 等)

それでは、Tailwind CSS の世界を一緒に探求していきましょう。

次に読む​