tailwindcss の使い方 — ユーティリティファーストCSS フレームワーク完全ガイド

一言でいうと

Tailwind CSS は、flex・pt-4・text-center のような小さなユーティリティクラスを組み合わせてUIを構築する CSS フレームワークです。独自のクラス名を考える必要がなく、HTML 上で直接デザインを完結できるのが最大の特徴です。

どんな時に使う？

1. コンポーネントベースのフロントエンド開発 — React / Vue / Svelte などで、スコープ付きのスタイリングを高速に行いたいとき
2. デザインシステムの構築 — カラーパレット・スペーシング・タイポグラフィなどのデザイントークンを一元管理し、チーム全体で一貫したUIを作りたいとき
3. プロトタイピング〜本番開発 — CSSファイルを別途書かずに素早くUIを組み上げ、そのまま本番品質まで持っていきたいとき

インストール

Tailwind CSS v4 では、設定ファイル不要で始められるようになりました。

# npm
npm install tailwindcss @tailwindcss/vite

# yarn
yarn add tailwindcss @tailwindcss/vite

# pnpm
pnpm add tailwindcss @tailwindcss/vite

補足: v4 では PostCSS プラグインとしての利用も引き続き可能です。Vite を使わないプロジェクトでは @tailwindcss/postcss を利用してください。

# PostCSS 経由で使う場合
npm install tailwindcss @tailwindcss/postcss

Vite での設定例（vite.config.ts）

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

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

CSS エントリポイント

プロジェクトのメイン CSS ファイル（例: src/app.css）に以下を記述します。

@import "tailwindcss";

v4 では、この1行だけで Tailwind のすべてのユーティリティが利用可能になります。

基本的な使い方

HTML（または JSX / TSX）にユーティリティクラスを直接記述してスタイリングします。

// React コンポーネントの例
export function Card({ title, description }: { title: string; description: string }) {
  return (
    <div className="max-w-sm rounded-2xl bg-white p-6 shadow-lg">
      <h2 className="text-xl font-bold text-gray-900">{title}</h2>
      <p className="mt-2 text-gray-600">{description}</p>
      <button className="mt-4 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 transition-colors">
        詳しく見る
      </button>
    </div>
  );
}

上記の例では、余白・角丸・影・色・ホバー状態まですべてクラス名だけで表現しています。

よく使う API（ユーティリティ & 機能）

1. レスポンシブデザイン

ブレークポイントプレフィックスを付けるだけでレスポンシブ対応できます。

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  {items.map((item) => (
    <div key={item.id} className="p-4 bg-white rounded-lg shadow">
      {item.name}
    </div>
  ))}
</div>

2. ダークモード対応

dark: プレフィックスでダークモード時のスタイルを指定できます。

<div className="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
  <p className="text-gray-600 dark:text-gray-400">
    ダークモードに自動対応するテキストです。
  </p>
</div>

3. ステート修飾子（hover / focus / active など）

<input
  type="email"
  placeholder="メールアドレス"
  className="w-full rounded-lg border border-gray-300 px-4 py-2
             focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/50
             placeholder:text-gray-400"
/>

主な修飾子:

• hover: — マウスオーバー時
• focus: — フォーカス時
• active: — クリック中
• disabled: — 無効状態
• first: / last: — 最初・最後の子要素
• group-hover: — 親要素のホバー時に子要素を変化

4. カスタムテーマ（CSS によるカスタマイズ）

v4 では tailwind.config.js の代わりに、CSS 内の @theme ディレクティブでテーマをカスタマイズします。

@import "tailwindcss";

@theme {
  --color-primary: #4f46e5;
  --color-primary-light: #818cf8;
  --color-primary-dark: #3730a3;
  --font-family-sans: "Inter", "Noto Sans JP", sans-serif;
  --breakpoint-3xl: 1920px;
}

これにより bg-primary、text-primary-light、font-sans、3xl: などのクラスが自動生成されます。

<button className="bg-primary hover:bg-primary-dark text-white font-sans px-6 py-3 rounded-lg">
  カスタムカラーのボタン
</button>

5. 任意値（Arbitrary Values）

デザイントークンにない値を使いたい場合、角括弧で任意の値を指定できます。

<div className="top-[117px] grid grid-cols-[1fr_2fr_1fr] bg-[#1da1f2]">
  {/* 117px のトップ位置、カスタムグリッド、Twitter ブルー */}
</div>

CSS 変数の参照も可能です。

<div className="bg-[var(--brand-color)] text-[length:var(--heading-size)]">
  CSS変数を直接参照
</div>

類似パッケージとの比較

注意点・Tips

1. v3 → v4 の主な破壊的変更

• 設定ファイルが CSS ベースに移行: tailwind.config.js / tailwind.config.ts は非推奨となり、@theme ディレクティブに置き換わりました。v3 からの移行には公式の @tailwindcss/upgrade ツールが利用できます。
• @tailwind base/components/utilities の廃止: v4 では @import "tailwindcss" の1行に統合されています。

# 自動マイグレーションツール
npx @tailwindcss/upgrade

2. クラス名の競合を防ぐ

同じプロパティに対して複数のクラスを書いた場合、CSS の詳細度とソース順で決まります。条件分岐で動的にクラスを切り替える場合は tailwind-merge の利用を推奨します。

import { twMerge } from "tailwind-merge";

// ❌ 意図通りにならない可能性
const className = `px-4 ${isLarge ? "px-8" : ""}`;

// ✅ tailwind-merge で安全にマージ
const className = twMerge("px-4", isLarge && "px-8");

3. エディタ拡張は必須

VS Code の Tailwind CSS IntelliSense 拡張を入れると、クラス名の自動補完・プレビュー・Lint が効くようになります。開発効率が劇的に向上するため、必ず導入してください。

4. Prettier プラグインでクラス順を統一

チーム開発では prettier-plugin-tailwindcss を導入し、クラスの記述順を自動整列させるのがベストプラクティスです。

npm install -D prettier prettier-plugin-tailwindcss

5. パフォーマンスについて

v4 では Rust 製の新エンジン（Oxide）が採用されており、ビルド速度が v3 比で大幅に向上しています。本番ビルドでは使用されているクラスのみが出力されるため、CSS ファイルサイズを心配する必要はありません。

まとめ

Tailwind CSS は、ユーティリティクラスの組み合わせだけで高品質なUIを構築できるCSSフレームワークです。v4（本記事は v4.2.2 時点）では設定ファイルが不要になり、CSS ベースのテーマカスタマイズや Rust 製エンジンによる高速ビルドなど、開発体験がさらに洗練されました。React・Vue・Svelte などのコンポーネント指向フレームワークとの相性が抜群で、モダンなフロントエンド開発における CSS ソリューションの第一選択肢と言えるでしょう。