Next.jsで新しいプロジェクトを作成してTailwind CSSを設定したのに、スタイルが全く適用されない…そんな経験はありませんか？
この記事では、多くの開発者が遭遇するTailwindの読み込み問題とその解決法を紹介します。
目次
よくある問題：従来の書き方で効かない
通常、Tailwind CSSを設定する際は `globals.css` に以下のように記述します：
/* app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;しかし、最新のNext.jsプロジェクトでは、この設定だけではTailwindが正常に動作しないケースが増えています。
解決法：1行のimportで即解決
解決方法は非常にシンプルです。従来の3行をコメントアウトして、代わりに以下の1行を追加するだけ：
/* app/globals.css */
@import "tailwindcss";🎯 なぜこの方法が有効なのか
- 最新のTailwind CSSでは、バンドル方式が変更されている
- `@import “tailwindcss”` で全体を一括読み込み
- Next.jsの最新ビルドシステムとの互換性が向上
確認方法
修正後、開発サーバーを再起動して以下のようなテストクラスで動作確認：
<div className="bg-blue-500 text-white p-4 rounded-lg">
Tailwind CSS が動作しています！
</div>その他の確認事項
- `tailwind.config.js` の `content` パスが正しく設定されているか（不要なパス削除忘れに注意）
- `globals.css` が `layout.tsx` で正しくimportされているか
- 開発サーバーの再起動を忘れずに
まとめ
Next.jsでTailwind CSSが効かない場合は、`@import “tailwindcss”;` の1行追加で解決できます。
従来の書き方で躓いている方は、ぜひ試してみてください！
