Next.jsでTailwind CSSが反映されないことへの対処

はじめに

原因は初歩的なものだったのですが、同じ部分でつまずいた初心者の方の参考になればと思い記載しておきます。

状況

Next.jsでTailwind cssが反映されなかった。

バージョン情報
Next.js: 15
Tailwind css: 3系

最初に確認したこと

Tailwind CSSがインストールされているか

postcssとautoprefixcerもインストールされているか、package.jsonを確認した。

Tailwind CSSの設定

tailwind.config.jsを確認した。
App Routerを使用していたため、以下の設定だった。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

CSSファイルのインポート

app/layout.jsxで./global.cssをインポートしていてパスはあっているか、またglobals.cssの中身は大丈夫かを確認した。

app/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

ブラウザコンソールのエラー

特に無かった。

ターミナルのログ

以下の警告が表示されていた。

warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration

この警告は、生成AIによると

Tailwind CSSがtailwind.config.jsのcontentで指定されたファイル内でユーティリティクラスを検出できなかったことを示しています。

とのこと。

原因

Next.jsファイルの作成時に以下の質問がある。

Would you like your code inside a src/ directory? No / Yes

今回のファイルを作成時にはYesと回答していた。

そのため、tailwind.config.jsでは以下の設定が必要だった。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}", // パスを更新
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

修正後はちゃんとTailwind CSSが反映された。

おわりに

Next.jsを初めて学習していてTailwind CSSにずっと頭を悩ませられていたので、解決できてよかったです。
これからは初歩的な部分に、より注意していきたいと思います。