CSSフレームワークの定番として個人開発者・エンジニアに広く使われている Tailwind CSS が、2025年に v4 へとメジャーアップデートされました。設定方法が根本から変わり、ビルドが爆速になり、コンテナクエリなどモダンCSSの機能が標準で使えるようになっています。

「v3からの移行はどれくらい大変？」「新機能は何が変わったの？」「個人開発でどう使えばいい？」——本記事ではこれらの疑問に答えながら、Tailwind CSS v4を今日から実践投入するための完全ガイドをお届けします。

Tailwind CSS v4とは？v3から何が変わったか

Tailwind CSS v4は、単なるバグ修正や機能追加ではなく、エンジンとコンフィグ方式の根本的な刷新です。大きく4つのポイントで変わりました。

① エンジン刷新：Rustベースで最大10倍高速化

v4ではビルドエンジンが完全に書き直されました。内部的にRustを活用した新エンジン「Lightning CSS」をベースにしており、v3と比べてインクリメンタルビルドが最大5〜10倍高速化されています。大規模プロジェクトほど恩恵が大きく、保存するたびにスタイルが即反映される体験が実現しています。

② CSS-firstな設定：tailwind.config.jsが不要に

v3では tailwind.config.js でテーマをカスタマイズしていましたが、v4では CSSファイル内で @theme を使って設定します。JavaScriptの設定ファイルを廃止し、CSSのみで完結するアーキテクチャへ移行しました。

/* v3（tailwind.config.js） */
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#6366f1',
      }
    }
  }
}

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

@theme {
  --color-brand: #6366f1;
  --font-sans: 'Inter', sans-serif;
  --radius-card: 12px;
}

CSSカスタムプロパティ（変数）として定義するので、ブラウザのDevToolsでリアルタイムに値を確認・変更できるメリットもあります。

③ コンテナクエリが標準搭載

v4ではメディアクエリに加え、コンテナクエリ（親要素のサイズに応じてスタイルを変えるCSS機能）がユーティリティクラスとして使えます。サイドバーの有無によってカードレイアウトを変えたい場合など、コンポーネント単位でレスポンシブを制御できます。

<div class="@container">
  <div class="grid @sm:grid-cols-2 @lg:grid-cols-3 gap-4">
    <div class="card">...</div>
  </div>
</div>

④ P3カラー・最新CSS機能がすぐ使える

v4では oklch() などのP3カラースペース、CSS @layer、 @starting-style（アニメーション初期状態）など最新CSS機能が標準で統合されています。プレフィックスなしでそのまま使えます。

変更点 v3 v4
ビルドエンジン PostCSS + JIT Lightning CSS（Rust）
設定ファイル tailwind.config.js CSS内 @theme
コンテナクエリ プラグイン必要 標準搭載
P3カラー 非対応 oklch()で使用可
インクリメンタルビルド 〜数百ms 数ms〜数十ms

インストール方法：Vite・Next.js別に解説

v4のインストールはv3よりはるかにシンプルになりました。PostCSSの設定ファイルや tailwind.config.js を自分で作る必要がありません。

Vite + React（または Vite + Vanilla）の場合

# プロジェクト作成（既存プロジェクトの場合は不要）
npm create vite@latest my-app -- --template react-ts
cd my-app

# Tailwind CSS v4をインストール
npm install tailwindcss @tailwindcss/vite

# vite.config.tsにプラグインを追加

vite.config.ts に Tailwind プラグインを追加します：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'  // ← 追加

export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),  // ← 追加
  ],
})

最後に、メインのCSSファイル（ src/index.css など）の先頭に一行追加します：

@import "tailwindcss";

これだけです！ tailwind.config.js も postcss.config.js も不要です。npm run dev を実行すれば、Tailwindのユーティリティクラスが使えるようになります。

Next.js の場合

npx create-next-app@latest my-app --typescript
cd my-app

# Tailwind CSS v4をインストール
npm install tailwindcss @tailwindcss/postcss postcss

postcss.config.mjs を作成：

const config = {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}
export default config

app/globals.css の先頭を書き換え：

/* v3では以下のような記述だったが */
/* @tailwind base; */
/* @tailwind components; */
/* @tailwind utilities; */

/* v4はこれだけでOK */
@import "tailwindcss";

v3からv4への移行

既存プロジェクトの移行には、公式が提供するアップグレードツールを使うのが最も確実です。

npx @tailwindcss/upgrade@next

このコマンドが自動的に：古い設定ファイルをCSSの @theme に変換し、削除・リネームされたクラスを検知してレポートしてくれます。ただし、カスタムプラグインを使っている場合は手動での対応が必要なケースがあるため、移行後に必ず動作確認を行いましょう。

広告

ConoHa WING

初期費用無料の高速クラウドサーバー

最大3,500円還元

詳しく見る →