CSS

Tailwind CSSとは？ ―
概要・導入方法・基本の書き方をまるごと解説

「ユーティリティファースト」のCSSフレームワーク、Tailwind CSS。導入にはNode.jsが必要？CDNじゃダメ？——そんな疑問を解消しつつ、v4準拠のセットアップから基本的なクラスの使い方まで、一気に押さえましょう。

✍

NAOYA

2026.05.03 読了目安：12分

そもそもTailwind CSSって何をするもの？

CSSフレームワークと聞くと、Bootstrapのような「既成のコンポーネントをそのまま使う」ものを思い浮かべるかもしれません。Tailwind CSSはまったくアプローチが違います。ボタンやカードといった完成品は用意されていません。代わりに、flex、p-4、text-center、bg-blue-500 のような「ユーティリティクラス」——1つのCSSプロパティに対応する小さなクラスを大量に組み合わせて、デザインをHTMLの中で直接組み立てていく仕組みです。

「それってインラインスタイルと同じでは？」と思いましたよね。実は全然違います。Tailwind CSSにはレスポンシブ対応のためのブレイクポイント接頭辞（md:、lg: など）、hover・focusなどの状態バリアント、そしてデザイントークン（色やスペーシングの統一値）による一貫性の担保があります。インラインスタイルでは実現できない「設計システム」が、クラス名の中に凝縮されているわけです。

Tailwind CSSの基本：HTMLにクラスを並べるだけ

<button class="bg-blue-600 text-white font-bold py-3 px-6 rounded-lg hover:bg-blue-700 transition-colors">
  送信する
</button>

▶ Live Demo — ユーティリティクラスで作るボタン

↑ Tailwindのクラスで表現されるスタイルを再現したもの。hover時に色が変わります。

従来のCSS設計（BEM、CSS Modulesなど）では、「クラス名をどう命名するか」「ファイルをどう分割するか」に相当な時間を使います。Tailwindはこの問題を「そもそもカスタムクラス名を作らない」という方法で解決しました。極端な話、CSSファイルを自分で書く量が劇的に減ります。

導入方法 ― Node.js環境が基本。CDNは本番NG

ここが最初のハードルになりやすいポイントです。Tailwind CSSは「ビルドツール」が前提のフレームワークです。なぜなら、HTMLを走査して実際に使われているクラスだけを抽出し、最小限のCSSを出力するという仕組みだから。この処理にはNode.js環境が必要です。

⚠️ 注意

公式サイトにはPlay CDN（<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4">）が用意されていますが、これは開発・プロトタイプ専用です。本番環境では未使用クラスの除去（Tree Shaking）が効かないため、ファイルサイズが膨大になります。必ずビルド環境を用意してください。

v4での3つの導入方法

Tailwind CSS v4（2025年1月リリース）では、導入方法が大幅にシンプルになりました。選択肢は3つあります。

方法① Viteプラグイン（推奨）

Viteベースのプロジェクトならこれがベストです。パフォーマンスが最も高く、設定もミニマルです。

ターミナルでインストール

npm install tailwindcss @tailwindcss/vite

vite.config.ts

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
});

app.css（たった1行！）

@import "tailwindcss";

方法② PostCSSプラグイン（Next.js / Angular向け）

Next.jsやAngularなど、すでにPostCSSパイプラインが組まれているプロジェクトではこちらが最適です。

ターミナルでインストール

npm install tailwindcss @tailwindcss/postcss postcss

postcss.config.mjs

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  }
};

方法③ Tailwind CLI（シンプルなHTMLサイト向け）

ViteやPostCSSを使わない静的サイトの場合は、CLI単体で動かせます。

CLIでのセットアップ

# インストール
npm install tailwindcss @tailwindcss/cli

# CSSファイルを作成（中身は @import "tailwindcss"; の1行）

# ビルド＆監視
npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch

💡 現場の経験則

「Node.jsを入れたくない」という場合は、スタンドアロン版CLIも公式から提供されています。GitHubのリリースページから実行ファイルをダウンロードすれば、Node.js不要でTailwindを使えます。ただし、プラグインの追加やnpmエコシステムとの連携ができなくなるので、本格的なプロジェクトではNode.js環境を整えることをおすすめします。

▶ Live Demo — Tailwindの出力結果イメージ

/* Tailwindが生成するCSS（使用クラスのみ） */
.bg-blue-600 { background-color: oklch(0.546 0.245 262.881); }
.text-white { color: #fff; }
.font-bold { font-weight: 700; }
.py-3 { padding-block: calc(var(--spacing) * 3); }
.px-6 { padding-inline: calc(var(--spacing) * 6); }
.rounded-lg { border-radius: var(--radius-lg); }
/* 未使用のクラスは出力されない！ */

↑ HTMLで使われたクラスだけがCSSに含まれる仕組み

v4の大きな変化 ― tailwind.config.jsが不要に

Tailwind CSS v3までは、カスタマイズにtailwind.config.jsというJavaScriptファイルが必須でした。色の追加、フォントの変更、ブレイクポイントの調整——すべてこのファイルで管理していたわけです。

v4ではこの設計が一新されました。「CSS-first設定」という新しいアプローチで、CSSファイルの中で直接カスタマイズできるようになっています。使うのは@themeディレクティブです。

❌ v3以前：tailwind.config.js が必要だった

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#1a73e8',
      },
      fontFamily: {
        body: ['Noto Sans JP', 'sans-serif'],
      },
    },
  },
  content: ['./src/**/*.{html,js}'],
};

✅ v4：CSSファイル内で完結

@import "tailwindcss";

@theme {
  --color-brand: #1a73e8;
  --font-body: "Noto Sans JP", sans-serif;
}

この@themeブロックで定義した変数は、そのまま新しいユーティリティクラスとして使えるようになります。--color-brandを定義すればbg-brandやtext-brandが自動で使えるし、--font-bodyを定義すればfont-bodyクラスが生まれます。

もう一つ大きな変化として、content配列（テンプレートファイルのパス指定）が不要になりました。v4ではプロジェクト内のファイルを自動で検知してくれます。.gitignoreに書かれたディレクトリ（node_modulesなど）は自動で除外されるので、ほとんどの場合、設定ゼロで動きます。

▶ Live Demo — @theme で追加したカスタムカラーの使用例

--color-brand: #1a73e8
→ bg-brand text-brand border-brand

このテキストは text-brand で着色されたイメージ

📌 ポイント

v3から移行する場合、既存のtailwind.config.jsは@configディレクティブで引き続き読み込めます。一気に書き換える必要はありません。公式の自動マイグレーションツール（npx @tailwindcss/upgrade）も用意されています。

基本のユーティリティクラスを覚えよう

Tailwindのクラスには命名規則があります。これを知っていれば、ドキュメントを見なくても「たぶんこう書けば動く」と予測できるようになります。

スペーシング（余白）系

v4では基準値--spacing: 0.25remをベースに、数値をかけ算して余白が決まります。p-4なら0.25rem × 4 = 1rem（16px）です。

余白系クラスの命名パターン

/* padding */
p-4      /* 全方向 padding: 1rem */
px-6     /* 左右（inline） padding: 1.5rem */
py-2     /* 上下（block） padding: 0.5rem */
pt-8     /* 上だけ padding-top: 2rem */

/* margin */
m-4      /* 全方向 margin: 1rem */
mx-auto  /* 左右マージンauto（中央寄せ） */
mt-12    /* 上だけ margin-top: 3rem */
mb-0     /* 下マージンなし */

/* gap（Flex / Grid用） */
gap-4    /* 子要素間の余白: 1rem */
gap-x-2  /* 横方向のみ: 0.5rem */

テキスト系

テキスト関連のクラス

text-sm       /* font-size: 0.875rem */
text-lg       /* font-size: 1.125rem */
text-2xl      /* font-size: 1.5rem */
font-bold     /* font-weight: 700 */
font-medium   /* font-weight: 500 */
text-center   /* text-align: center */
leading-tight /* line-height: 1.25 */
tracking-wide /* letter-spacing: 0.025em */
text-gray-700 /* color: グレー700 */

レイアウト系

レイアウト関連のクラス

flex            /* display: flex */
grid            /* display: grid */
hidden          /* display: none */
items-center    /* align-items: center */
justify-between /* justify-content: space-between */
flex-col        /* flex-direction: column */
w-full          /* width: 100% */
max-w-md        /* max-width: 28rem */
h-screen        /* height: 100vh */

▶ Live Demo — よくあるカードレイアウト

画像エリア

記事タイトルが入ります

Tailwindのユーティリティだけで、このようなカードUIが構築できます。

↑ rounded-xl shadow-md overflow-hidden などを組み合わせたイメージ

状態バリアント ― hover: / focus: / active:

Tailwindの強力な特徴が「バリアント」です。クラス名の先頭にhover:と付けるだけで、hoverスタイルが定義できます。CSSファイルを行き来する必要がありません。

状態バリアントの例

<button class="bg-blue-600 hover:bg-blue-700 focus:ring-2 focus:ring-blue-300 active:scale-95 transition">
  クリック
</button>

<!-- ダークモード対応 -->
<div class="bg-white dark:bg-gray-900 text-black dark:text-white">
  コンテンツ
</div>

実践：最初のページを組んでみる

ここまでの知識で、実際にシンプルなレイアウトを作ってみましょう。ヘッダー + メインコンテンツ + フッターという基本構成です。

Tailwindで組む基本ページ構成

<body class="min-h-screen flex flex-col bg-gray-50">

  <!-- ヘッダー -->
  <header class="bg-white shadow-sm">
    <nav class="max-w-5xl mx-auto px-4 py-4 flex items-center justify-between">
      <a class="text-xl font-bold text-gray-900">MySite</a>
      <ul class="flex gap-6 text-sm text-gray-600">
        <li><a class="hover:text-blue-600 transition-colors">About</a></li>
        <li><a class="hover:text-blue-600 transition-colors">Works</a></li>
        <li><a class="hover:text-blue-600 transition-colors">Contact</a></li>
      </ul>
    </nav>
  </header>

  <!-- メイン -->
  <main class="flex-1 max-w-5xl mx-auto px-4 py-12">
    <h1 class="text-3xl font-bold text-gray-900 mb-4">Welcome</h1>
    <p class="text-gray-600 leading-relaxed">ここに本文</p>
  </main>

  <!-- フッター -->
  <footer class="bg-gray-900 text-gray-400 text-center py-8 text-sm">
    &copy; 2025 MySite
  </footer>

</body>

▶ Live Demo — 基本ページ構成

MySite

AboutWorksContact

Welcome

Tailwindのユーティリティで構築されたシンプルなページレイアウトです。

ポイントはmin-h-screen flex flex-colの組み合わせです。bodyに対してこの3つを指定し、mainにflex-1を付けることで、コンテンツが少なくてもフッターが画面下部に張り付く「スティッキーフッター」が実現できます。Tailwindではこういった定番パターンがクラス3〜4個で書けるのが魅力です。

💡 現場の経験則

Tailwindの最大の学習コストは「クラス名を覚えること」ではなく「CSSの概念を理解すること」です。flex-1が何をしているのか分からないなら、それはTailwindの問題ではなく、Flexboxのflex-grow: 1を知らないだけ。Tailwindは「CSSの省略記法」に近いので、素のCSSの理解があるほど使いこなせます。

よくある疑問と注意点

「クラスが長すぎて読みにくくない？」

正直、最初は面食らいます。でも慣れると「このHTML要素のスタイルがすべてここに見える」という透明性のメリットの方が大きく感じます。どうしてもクラスが長い場合は、コンポーネント化（React/Vueならコンポーネントに切り出す、素のHTMLなら@applyでまとめる）で対処します。

@apply でクラスをまとめる（使いすぎ注意）

@layer components {
  .btn-primary {
    @apply bg-blue-600 text-white font-bold py-3 px-6 rounded-lg
           hover:bg-blue-700 transition-colors;
  }
}

❌ @apply の乱用は本末転倒

/* これではTailwindを使う意味がない */
.header { @apply flex items-center justify-between px-4 py-4; }
.nav-link { @apply text-sm text-gray-600 hover:text-blue-600; }
.main-content { @apply max-w-5xl mx-auto px-4 py-12; }
/* ↑ 結局クラス名を命名する作業に戻ってしまっている */

「既存プロジェクトに途中から入れられる？」

はい、可能です。Tailwind v4は@layerを使ったCascade Layersに基づいているので、既存CSSとの競合が起きにくい設計になっています。ただし、CSSのリセットスタイル（Preflight）がデフォルトで適用されるため、既存のスタイルに影響が出る場合は@import "tailwindcss/utilities"だけを読み込む方法も検討してください。

「エディターの補完はある？」

VS Codeなら「Tailwind CSS IntelliSense」拡張機能が公式から提供されています。クラス名の自動補完、ホバーで生成されるCSSのプレビュー、エラー検知まで対応しているので、これなしでTailwindを書くのは正直つらいです。必ず入れてください。

▶ Live Demo — クラス名の規則性を確認

p-4
1rem (16px)

p-8
2rem (32px)

p-12
3rem (48px)

p-16
4rem (64px)

↑ 数値 × 0.25rem で計算できる規則性

まとめ

Tailwind CSSはユーティリティクラスを組み合わせてデザインを構築するCSSフレームワーク。既成コンポーネントではなく「CSSの省略記法」に近い
本番環境では必ずビルド環境（Node.js + Vite/PostCSS/CLI）を使うこと。Play CDNは開発限定で、未使用クラスの除去ができない
v4では tailwind.config.js が不要になり、CSSファイル内の @theme ディレクティブで設定が完結する
contentパス設定も不要に。v4はファイルを自動検知し、.gitignoreの内容を尊重してスキャンする
クラス名には一貫した命名規則があり、数値ベースのスペーシング（p-4 = 1rem）を覚えれば応用が効く
hover: / focus: / dark: などのバリアントを接頭辞に付けるだけで、状態別スタイルがHTMLで完結する
VS Codeの「Tailwind CSS IntelliSense」は必須。入れずに使うのは非効率

Tailwind CSSとは？ ―概要・導入方法・基本の書き方をまるごと解説

そもそもTailwind CSSって何をするもの？

導入方法 ― Node.js環境が基本。CDNは本番NG

v4での3つの導入方法

方法① Viteプラグイン（推奨）

方法② PostCSSプラグイン（Next.js / Angular向け）

方法③ Tailwind CLI（シンプルなHTMLサイト向け）

v4の大きな変化 ― tailwind.config.jsが不要に

基本のユーティリティクラスを覚えよう

スペーシング（余白）系

テキスト系

レイアウト系

記事タイトルが入ります

状態バリアント ― hover: / focus: / active:

実践：最初のページを組んでみる

Welcome

よくある疑問と注意点

「クラスが長すぎて読みにくくない？」

「既存プロジェクトに途中から入れられる？」

「エディターの補完はある？」

まとめ

Tailwind CSSとは？ ―
概要・導入方法・基本の書き方をまるごと解説