【Tailwind入門】Tailwind CSSとは

CSSを書いたことがあるなら、きっと経験があるはずです。1ピクセルのmarginを調整するのに30分かかったり、クラス名を考えるために画面を5分見つめたり、フレームワークのデフォルトスタイルを上書きするだけですべてのスタイルシートを探し回ったり……Tailwind CSSは、これらの問題を解決するために生まれました。もう一つのBootstrapではありません。これはCSSの全く新しい書き方なのです。

1. Tailwind CSSとは

Tailwind CSSはユーティリティファーストのCSSフレームワークです。その核心は、カスタムCSSを書くのではなく、HTML内に定義済みのクラスを直接適用してスタイルを制御するという考え方です。

具体的な比較を見てみましょう。ページに青いボタンを配置する場合です。

例：従来のCSSとTailwindの比較（難易度 ⭐）

従来のCSS：

HTML

<style>
.btn-primary {
  background-color: #2563eb;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}
.btn-primary:hover {
  background-color: #1d4ed8;
}
</style>
<button class="btn-primary">クリック</button>

▶ 試してみよう

Tailwind：

例：Tailwindのアプローチ（難易度 ⭐）

HTML

<button class="bg-blue-600 text-white px-6 py-3 rounded-lg text-base cursor-pointer hover:bg-blue-700">
  クリック
</button>

▶ 試してみよう

上のTailwindコードをエディタで試して、結果を確認してみましょう。

違いがわかりましたか？Tailwindでは、HTMLから一切離れる必要がありません。すべてのスタイルはクラスで構成されます。bg-blue-600は青い背景、px-6は水平方向のpadding、rounded-lgは大きな角丸、hover:bg-blue-700はホバー時に色を暗くする、といった具合です。

💡 「ユーティリティファースト」とは？ 簡単に言うと、CSSプロパティを可能な限り最小の原子クラスに分解する考え方です。bg-blue-600は1つのことだけを行います。背景色を青に設定します。text-whiteも1つのことだけを行います。テキスト色を白に設定します。ブロックを組み合わせるように、必要なクラスを組み合わせて使います。

2. Tailwindと従来のフレームワークの比較

vs Bootstrap

Bootstrapはコンポーネントベースのフレームワークです。固定のHTML構造で呼び出す、あらかじめ設計されたコンポーネント（ボタン、ナビバー、カード、フォーム）を提供します。問題は、見た目をカスタマイズしたい場合、BootstrapのCSSを上書きするか、Sass変数を変更する必要があることです。

側面	Bootstrap	Tailwind CSS
核心の哲学	完成品のコンポーネントを提供	自分で組み合わせる原子クラスを提供
カスタマイズ	デフォルトの上書きが面倒	自由に組み合わせ可能、上書き不要
学習コスト	コンポーネント名を覚える	どのクラスがどのCSSプロパティに対応するかを覚える
バンドルサイズ	使わないスタイルも多数含まれる	実際に使うクラスのみ含まれる
デザインの自由度	Bootstrapサイトはどれも同じに見える	すべてのサイトがユニークにできる

vs 手書きCSS

側面	手書きCSS	Tailwind CSS
命名	すべてのスタイルにクラス名が必要	命名不要、クラスを組み合わせるだけ
ファイルの切り替え	HTMLとCSSファイル間を行き来する	すべてHTML内に完結
コード量	2つのファイルセット、かなりの量	クラス1行で完了
保守性	CSS内でスタイルを探して変更する	HTML内で直接クラスを変更
一貫性	チームの規約に依存	内蔵デザインシステム、自動的に一貫性を確保

例：シンプルなプロフィールカード（難易度 ⭐）

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwindプロフィールカード</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
  <div class="max-w-xs mx-auto p-6 bg-white rounded-2xl shadow-lg text-center">
    <img src="https://i.pravatar.cc/80" alt="アバター"
         class="w-20 h-20 rounded-full mx-auto mb-3">
    <h2 class="text-xl font-bold text-gray-900 mb-1">山田太郎</h2>
    <p class="text-sm text-blue-600 mb-2">フロントエンドエンジニア</p>
    <p class="text-sm text-gray-500 mb-4">コーディングに情熱を注ぎ、Web開発に注力しています</p>
    <button class="bg-blue-600 text-white px-6 py-2 rounded-lg cursor-pointer
                   hover:bg-blue-700 transition-colors">
      お問い合わせ
    </button>
  </div>
</body>
</html>

▶ 試してみよう

このコードを.htmlファイルとして保存し、ブラウザで開いてみてください。インストール不要、すぐに動きます。

💡 Tailwindのクラスは長くて見苦しい？ ほとんどの人が最初はそう思います。しかし1週間使うと、多くの人が考えを変えます。「見苦しくても効率的」が「きれいでも面倒」に勝つのです。クラス名は本質的にCSSプロパティの省略形であり、慣れてくれば長く感じなくなります。

3. Tailwind CSS v4の主な変更点

Tailwind CSS v4は2025年3月にリリースされ、v3から大幅なアーキテクチャアップグレードをもたらしました。

変更点	v3の方法	v4の方法
ビルドエンジン	JavaScript	Rust（Oxideエンジン）、3.5倍高速なビルド
CSSエントリーポイント	`@tailwind base/components/utilities`	`@import "tailwindcss"`
設定	`tailwind.config.js`	CSS内の`@theme`ディレクティブ
カスタムテーマ	JS設定ファイル	CSSネイティブ変数＋`@theme`
新機能	—	コンテナクエリ、`@starting-style`、CSS nesting

初心者にとってv4の最大のポイントは、設定がよりシンプルになったことです。以前はnpmパッケージのインストールと設定ファイルの記述が必要だった場面が、@import "tailwindcss"の1行で動くようになりました。

⚠️ 注意： オンラインの多くのチュートリアルはまだv3ベースです。tailwind.config.jsや@tailwind baseという構文を見かけたら、それは旧バージョンです。本チュートリアルはv4に基づいており、すべての例で最新の構文を使用しています。

4. Tailwindを学ぶための前提知識

このチュートリアルを始める前に、以下を理解しておく必要があります。

HTMLの基礎：タグ、属性、クラス名の書き方
CSSの基礎：Flexbox、Grid、ボックスモデル、レスポンシブデザインの基本

復習が必要な場合は、HTMLチュートリアルとCSSチュートリアルをご覧ください。これらの基礎があれば、Tailwindの学習はスムーズに進みます。

💡 Tailwindは「CSSを学ぶ」ためのものではなく、「CSSをより効率的に書く」ためのものです。display: flexが何をするかまだ分からない場合は、先にCSSの基礎を復習することをお勧めします。

一般的なユースケース

ラピッドプロトタイピング：デザインモックアップから動作するページへ、Tailwindは最も効率的なソリューションの一つです。CSSを書く必要も、クラス名を考える必要も、ファイルを切り替える必要もありません。
個人プロジェクト／ランディングページ：1つのHTMLファイル＋CDNだけで完結します。製品紹介、イベントページ、個人ホームページに最適です。
大規模プロジェクト：Tailwindとコンポーネントフレームワーク（React/Vue）を組み合わせれば、競合のない完全に自己完結したコンポーネントスタイルが実現します。
管理ダッシュボード：Tailwindのスペーシングシステム＋Flex/Gridユーティリティで、手書きCSSより何倍も速くダッシュボードレイアウトを構築できます。

❓ よくある質問

Q TailwindとBootstrap、どちらを学ぶべきですか？

A どちらも学ぶ価値がありますが、目的が異なります。Bootstrapは「手軽にそこそこの見た目のインターフェースを作る」のに向いており、Tailwindは「すべてのピクセルを正確に制御したい」場合に優れています。デザインの自由度と長期的な保守性を重視するならTailwindが良い選択です。単に社内ツールを素早く動かしたいならBootstrapの方が早いです。業界のトレンドでは、Tailwindの成長がすでにBootstrapを上回っています。

Q クラス名が長いとHTMLファイルが肥大化しませんか？

A その通りです。それがTailwindに対する最も一般的な批判です。シンプルなボタンでも6〜7個のクラスを持つかもしれません。しかし緩和策があります。本番ビルドではクラス名を短いトークンに圧縮するツールが使われます。繰り返し使うクラスの組み合わせは@applyで抽出できます（後で解説）。React/Vueコンポーネントと組み合わせれば、クラスはコンポーネントファイル内に収まり、乱雑に感じません。

Q Tailwindはページのパフォーマンスに悪影響がありますか？

A いいえ、むしろ逆です。Tailwindの本番ビルドは未使用のクラスをすべて削除（tree-shaking）するため、CSSファイルは通常10KB程度になります。開発中のCDN版は確かに大きいですが、デプロイ前にビルドツールを通せば非常に小さな出力が得られます。

Q Tailwindはどこから学び始めればよいですか？

A まずユーティリティファーストの哲学を理解し（今回のレッスン）、次に最小限の例をセットアップして実行し（次回のレッスン）、最もよく使うクラス（スペーシング、カラー、タイポグラフィ）を練習し、最後にレイアウト（Flex、Grid）とレスポンシブデザインに取り組むのがおすすめです。本チュートリアルはまさにこの順序に沿っています。そのまま進めてください。

📖 まとめ

TailwindはユーティリティファーストのCSSフレームワークで、原子クラスの組み合わせでスタイルを制御します
Bootstrapとは異なり、Tailwindは完成品のコンポーネントではなく、自分で作るための構成要素を提供します
従来のCSSでは命名、ファイル切り替え、上書きが必要ですが、TailwindはすべてをHTML内に完結させ、より高い効率を実現します
v4はRustエンジンで構築され、v3の@tailwindディレクティブの代わりに@import "tailwindcss"を使用します
Tailwindを学ぶにはHTMLとCSSの基礎が必要です。「CSSの学習をスキップする」のではなく「CSSをより上手に書く」ためのものです
CDNリンク（<script src="https://cdn.tailwindcss.com"></script>）をHTMLに追加するだけで、すぐに試せます

📝 課題

基本（難易度 ⭐）：すでに書いたHTMLページ（数行のテキストだけでも可）にTailwindのCDNリンクを<head>に追加し、Tailwindクラスを使ってテキストの色とフォントサイズを変更してみましょう。結果を確認してください。
中級（難易度 ⭐⭐）：手書きCSSでシンプルなカードコンポーネント（タイトル、テキスト、ボタンを最低1つずつ含む）を作り、次にTailwindで作り直してみましょう。2つのアプローチのコード量と開発体験を比較してください。見た目は気にしなくて構いません。違いを体感することが目的です。
チャレンジ（難易度 ⭐⭐⭐）：https://play.tailwindcss.com/（Tailwind公式のオンラインPlayground）を開き、左側のエディタで個人プロフィールページを作ってみましょう。内容は、円形のアバター、名前（大きく太字）、自己紹介（灰色のテキスト）、3つのスキルタグ（角丸、薄い色の背景）、ボタンです。カスタムCSSは一切使わず、Tailwindクラスのみ使用してください。