Zenn
🐡

TailwindCSSの警告（No utility classes were detected）

2023/07/05に公開
Tailwind CSS
tech

解決したい課題

TailwindCSS の環境を構築するときに以下のメッセージを見かけることがあります。

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

https://tailwindcss.com/docs/content-configuration

原因と解決方法

原因は主に以下の２つです。

原因１：ファイルパスが誤っている

tailwind.config.js の content オプションに、TailwindCSS のクラスを利用するファイルのパスを指定します。これに誤りがないか確認します。誤りがあれば、パスを修正します。

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  // 指定された範囲でファイルが存在するか確認する
  content: [
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  plugins: [],
};

原因２：TailwindCSS のクラスが使われていない

TailwindCSS がプロジェクト全体で 1 箇所も使われていないです。実際にコードの中で使います。

src/app/page.tsx
export default function Home() {
  return (
    <main className="">
      テストページ
    </main>
  )
}

警告メッセージの再現

警告メッセージを再現するために、新規にプロジェクトを作成します。

$ pnpm create next-app@latest next-tailwind-contents-warning-sample --typescript --eslint --import-alias "@/*" --src-dir --use-pnpm --tailwind --app
$ cd next-tailwind-contents-warning-sample

以下の通り不要な設定を削除し、プロジェクトの初期環境を構築します。

src/app/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
src/app/page.tsx
export default function Home() {
  return (
    <main className="">
      テストページ
    </main>
  )
}
src/app/layout.tsx
import "./globals.css";

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ja">
      <body className="">{children}</body>
    </html>
  );
}
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  plugins: [],
};
tailwind.config.js
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
+    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
+      "@app/*": ["./src/app/*"],
+      "@components/*": ["./src/components/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

ビルドします。すると、警告が表示されます。

$ pnpm build

> next-tailwind-contents-warning-sample@0.1.0 build /Users/hayato94087/Private/next-tailwind-contents-warning-sample
> next build

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- info Creating an optimized production build  
- info Compiled successfully
- info Linting and checking validity of types  
- info Collecting page data  
- info Generating static pages (4/4)
- info Finalizing page optimization  
...

コミットします。

$ pnpm build
$ git add .
$ git commit -m "TailwindCSSの警告あり"

今回は、原因 2 のため、TailwindCSS を利用していないため、警告メッセージが出ていました。以下の通り修正し、TailwindCSS を利用するように修正します。

src/app/page.tsx
export default function Home() {
  return (
-    <main className="">
+    <main className="text-lg">
      テストページ
    </main>
  )
}

ビルドすると警告がなくなります。

$ pnpm build

> next-tailwind-contents-warning-sample@0.1.0 build /Users/hayato94087/Private/next-tailwind-contents-warning-sample
> next build

- info Creating an optimized production build  
- info Compiled successfully
- info Linting and checking validity of types  
- info Collecting page data  
- info Generating static pages (4/4)
- info Finalizing page optimization  
...

コミットします。

$ pnpm build
$ git add .
$ git commit -m "TailwindCSSの警告なし"

原因１も再現しておきます。以下のように存在しないパスに修正します。

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
-    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src2/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src2/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  plugins: [],
};

ビルドすると警告が出ます。が、原因１の場合は初回ビルドしか警告メッセージが出ず、2 回目以降は出ないように見えます。

$ pnpm build

> next-tailwind-contents-warning-sample@0.1.0 build /Users/hayato94087/Private/next-tailwind-contents-warning-sample
> next build


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
- info Creating an optimized production build  
- info Compiled successfully
- info Linting and checking validity of types  
- info Collecting page data  
- info Generating static pages (4/4)
- info Finalizing page optimization  
...

簡単ですが以上です。

以下に作業ソース念のためおいておきます。

https://github.com/hayato94087/next-tailwind-contents-warning-sample

Discussion