Claude Codeを試したらTailwind CSS v4が動かなかった

こんにちは、suu3です。

最近、AIツール「Claude Code」を使って、React + TypeScript + Tailwind CSS の開発環境をサクッと立ち上げてみました。

<div className="min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
    <div className="bg-white rounded-lg shadow-xl p-8 max-w-md w-full mx-4">
        <h1 className="text-4xl font-bold text-gray-800 text-center mb-4">
            Hello World! 👋
        </h1>
        <p className="text-gray-600 text-center mb-6">
            React + TypeScript + Tailwind + Vite
        </p>
        <div className="flex flex-col gap-2 text-sm text-gray-500 text-center">
            <div>⚛️ React {React.version}</div>
            <div>📘 TypeScript</div>
            <div>🎨 Tailwind CSS</div>
            <div>⚡ Vite</div>
        </div>
    </div>
</div>

一見問題なさそう……と思いきや、

「あれ、Tailwind効いてない……？」
「背景色とか指定されてるみたいだけど、何も変わってない……」

原因を調べたところ、**Tailwind v3からv4への変更点が適用されていないことが関係していたようでした。
今回はその原因と解決策をまとめておきます。

2025/08/11追記
現時点では、1～２度の修正で問題なくTailwindCSSを適用できました。
今思うと、以前ももう少し試していればうまく行ったかもしれせんが、今回はあまり考えずに適用できたので良しとします。

結論

項目	内容
原因	Tailwind CSS v4 に対応した記述になっていなかった（2025年7月時点）
解決策	・vite.config.tsにviteプラグインを追加 ・CSSの記述を@tailwindから変更

プロジェクト構成（Claude Code による生成）

Claude Code に以下のようなプロンプトを投げて、プロジェクトを生成しました：

React ✕ TypeScript ✕ Vite 構成で Tailwind を導入して

生成された package.json の抜粋は以下のとおりです。

package.json

"devDependencies": {
  "vite": "^7.0.4",
  "tailwindcss": "^4.1.11",
}

ディレクトリ構成

project/
├── node_modules/
├── public/
├── src/
│ ├── assets/
│ │ ├── App.tsx
│ │ ├── index.css
│ │ └── main.tsx
│ └── vite-env.d.ts
├── .gitignore
├── eslint.config.js
├── index.html
├── package-lock.json
├── package.json
├── postcss.config.js
├── README.md
├── tailwind.config.js
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

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

Tailwind CSS v4 を使用する場合は、@tailwindcss/vite プラグインを追加する必要があります。

vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
+ import tailwindcss from '@tailwindcss/vite';

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

index.css の記述方法を変更

Tailwind CSS v4 では、以下のように @import "tailwindcss" と1行で済みます。

index.css

- @tailwind base;
- @tailwind components;
- @tailwind utilities;
+ @import "tailwindcss";

この2点を直すことでTailwindスタイルが正しく適用されました。

---

📝 おわりに

今回は Tailwind CSS v4 の仕様変更に気づかず、思わぬ落とし穴にはまりました。
Claude Code のようなAIツールはとても便利で、環境構築も数分で終わるほどの強力なサポーターです。

ですが、AIはあくまで「提案者」であり、そのコードがなぜそう書かれているのか、何をしているのかを理解しないまま進めてしまうと、「自分が何をしているのか分からない」状態で、環境依存やバージョン違いの罠にハマり続けることも出てくることでしょう。

AIを使いこなす人になるために、「任せきりにせず、必要な理解は自分で掘る」というスタンスを持ち続けたいと思います。