一部のTailwind CSSしか反映されないときの対処法【Next.js】

状況

ディレクトリ構造を大幅に変更した際に、一部ファイルのTailwind CSSが効かなくなった。全てのTailwindが効かなくなったわけではなく、一部が効かなくなった。

＜変更前のディレクトリ構造＞

src
├── app
│   ├── books
│   │   └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
├── components
│   ├── Header.tsx
│   └── badge.tsx

＜変更後のディレクトリ構造＞

src
├── app
│   ├── books
│   │   └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
├── components
│   └── badge.tsx
├── features <===新たなディレクトリ
│   └── header
│       └── components
│           └── Header.tsx

※ わかりやすいようにディレクトリをかなり省略しています。

使用環境

• Next.js：14.2.18(App Router)
• Tailwind CSS：3.4.1

原因

変更前はappディレクトリ配下に全てのコンポーネントを置いていたが、変更後はappディレクトリ配下以外にもコンポーネントを置いたため。
よく見ると、appとcomponents配下のtailwindは反映されており、それ以外のTailwindが反映されていなかった。上の例だとHeader.tsxのTailwindが反映されないということになる。

対処法

ルートディレクトリ配下のtailwind.config.tsのcontentにパスを追加してあげる。

import type { Config } from "tailwindcss";
import tailwindcssAnimate from "tailwindcss-animate";
import typography from "@tailwindcss/typography";

const config: Config = {
  darkMode: ["class"],
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/features/**/*.{js,ts,jsx,tsx,mdx}", // <===追加
  ],
  theme: {

デフォルトでは、src/pages、src/components、src/app配下のコンポーネントにしかtailwindが適用されないようになっている。そのため、src/featuresも定義してあげる。