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

環境構築

この章では、Tailwind CSS v4 の開発環境を構築します。

対応ブラウザ​

Tailwind CSS v4 は以下のブラウザをサポートしています。

  • Safari 16.4 以上
  • Chrome 111 以上
  • Firefox 128 以上
モダン CSS への依存

v4 は @property や color-mix() などのモダン CSS 機能に依存しているため、古いブラウザでは動作しません。

v4 対応ブラウザならモダン CSS 機能が揃う

これらのブラウザバージョンでは、本ガイドで扱うモダン CSS 機能 (コンテナクエリ、:has() セレクタ、svh/dvh ビューポート単位、oklch カラースペース等) がすべてサポートされています。v4 対応ブラウザであれば、個別の機能について互換性を心配する必要はありません。

Vite プロジェクトでのセットアップ​

プロジェクト作成​

npm create vite@latest tailwind-project -- --template react-ts
cd tailwind-project
npm install

Tailwind CSS のインストール​

npm install -D tailwindcss @tailwindcss/vite

Vite 設定の更新​

vite.config.ts
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";

動作確認​

src/App.tsx
function App() {
  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
      <h1 className="text-4xl font-bold text-blue-600">
        Hello Tailwind CSS!
      </h1>
    </div>
  )
}

export default App

開発サーバーを起動します。

npm run dev

PostCSS でのセットアップ​

Vite プラグインを使わない場合は、PostCSS プラグインを使用します。

インストール​

npm install -D tailwindcss @tailwindcss/postcss postcss

PostCSS 設定​

postcss.config.js
export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

CSS ファイル​

src/index.css
@import "tailwindcss";

CLI でのセットアップ​

ビルドツールなしで使用する場合は、CLI を使用します。

インストール​

npm install -D tailwindcss @tailwindcss/cli

入力 CSS の作成​

src/input.css
@import "tailwindcss";

ビルドコマンド​

npx @tailwindcss/cli -i src/input.css -o dist/output.css --watch

CDN での利用 (開発用)​

プロトタイピングや学習用途では、CDN も利用できます。

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body>
  <h1 class="text-3xl font-bold text-blue-500">Hello!</h1>
</body>
</html>
CDN は本番用途には非推奨

CDN 版は本番環境には推奨されません。開発・プロトタイピング用途に限定してください。

VS Code 拡張機能​

Tailwind CSS IntelliSense​

公式の拡張機能で、以下の機能が利用できます。

  • クラス名の自動補完
  • ホバーで CSS プレビュー
  • 構文エラーの検出
  • 構文ハイライト

インストール:

  1. VS Code の拡張機能パネルを開く
  2. 「Tailwind CSS IntelliSense」を検索
  3. インストール

推奨設定​

.vscode/settings.json
{
  "tailwindCSS.experimental.classRegex": [
    ["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ],
  "editor.quickSuggestions": {
    "strings": true
  }
}

Prettier 連携​

クラスの自動並び替えには、Prettier プラグインを使用します。

npm install -D prettier prettier-plugin-tailwindcss
.prettierrc
{
  "plugins": ["prettier-plugin-tailwindcss"]
}

プロジェクト構成​

推奨されるプロジェクト構成です。

project/
├── src/
│   ├── components/
│   │   ├── Button.tsx
│   │   └── Card.tsx
│   ├── index.css      # @import "tailwindcss"
│   ├── App.tsx
│   └── main.tsx
├── vite.config.ts
├── postcss.config.js  # PostCSS 使用時
└── package.json

本番環境への準備​

ビルドコマンド​

npm run build

Tailwind CSS v4 はビルド時に、プロジェクト内で使用されているクラスのみを CSS に出力します。

content 配列が不要になった (v3 → v4)

v3 では tailwind.config.js に content 配列でスキャン対象ファイルを指定する必要がありました。v4 では Vite プラグインまたは @tailwindcss/postcss が自動的にソースファイルを検出するため、手動での設定は不要です。

ビルドサイズの目安​

一般的なプロジェクトでは、本番 CSS のサイズは gzip 後で 10〜30KB 程度です。未使用クラスが自動的に除去されるため、開発中にどれだけ多くのユーティリティを試しても最終的なファイルサイズには影響しません。

フレームワーク別セットアップ補足 (Next.js / Nuxt)

Next.js​

npm install tailwindcss @tailwindcss/postcss postcss
postcss.config.mjs
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};
app/globals.css
@import "tailwindcss";

Nuxt​

npm install tailwindcss @tailwindcss/vite
nuxt.config.ts
import tailwindcss from "@tailwindcss/vite";

export default defineNuxtConfig({
  css: ["~/assets/css/main.css"],
  vite: {
    plugins: [tailwindcss()],
  },
});
assets/css/main.css
@import "tailwindcss";
@nuxtjs/tailwindcss モジュールは v3 系

@nuxtjs/tailwindcss モジュールは Tailwind CSS v3 系に依存しているため、v4 では公式手順どおり @tailwindcss/vite プラグインを直接使用します。

まとめ​

  • Tailwind CSS v4 は Vite プラグインまたは PostCSS で設定
  • @import "tailwindcss" でインポート
  • VS Code 拡張機能で開発効率アップ
  • Prettier プラグインでクラスを自動整列
  • 対応ブラウザ: Chrome 111+, Safari 16.4+, Firefox 128+
  • 本番ビルドでは未使用 CSS が自動除去される

次に読む​