🎨

Claude CodeでTailwindが読み込まれないときの対処と原因

2025/09/01に公開

はじめに

Claude Codeを使っていて、ちょっとハマったことの紹介です。意外に同じようなパターンで困る人もいるかもしれないので、誰かの助けになれば幸いです。

Claude Codeに雑に指示して、Tailwindを導入したはずなのにスタイルが一向に当たらない……そんなときの話です。

結論

原因はTailwind v4をインストールしていたのに、v3の記法を使っていたことでした。

この方の記事に助けられて気づけました。

だめだったコード（v3のまま）

/* index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

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

よかったコード（v4対応）

/* index.css */
@import "tailwindcss";

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

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

無駄なやりとりたくさんした

Tailwindはnodeで入れたけど、スタイルが一向に当たらないのでClaude Codeに何度も確認しました。

当たってないんじゃ？っていっても「当たってますね！」
当たってないように見えるよ、確認できる？って言っても「当たってますね！」
スクショを送っても「当たってますね！」
Playwrightでスクショを撮らせても「完全に当たってます！」

と言い張るClaude Codeちゃん。完全ってなに？

「もしかして自分が間違っているのか……？」と思いましたが、どうみても当たってないので、最終的には人力でググったら、やっぱり当たってなかったじゃねえかとなりました。

記事のURLを渡して、これが原因だから対応してって指示したら、それだけで完璧に対応してくました。すごい優秀。

まとめ

claude code は優秀。

はじめに

結論

だめだったコード（v3のまま）

よかったコード（v4対応）

無駄なやりとりたくさんした

まとめ

Discussion