凡ミス: React Flowを使ったコンポーネントでTailwindCSSのクラスが反映されなかった事象のメモ

凡ミス: React FlowでTailwindCSSのクラスが動作しなくなった時のメモ

React Flowを使ったコンポーネントを実装していた時、クラスを指定してもスタイルが反映されない事象に遭遇した。その原因があまりにも凡ミスすぎたので、このようなミスはもう二度と繰り返さないという気持ちを込めてメモ。

環境

• Next.js (app router)
• featureディレクトリにReact Flowに関するコンポーネントを集約して実装していた。

{
  "dependencies": {
    "@xyflow/react": "^12.3.6",
    "next": "15.1.3",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
  },
  "devDependencies": {
    "tailwindcss": "^3.4.1",
  }
}

発生した事象

• TailwindCSSのクラスを指定してもスタイルが反映されない。
• arbitrary variantsも同様
• create-next-appで生成した最初のpage.tsxではスタイルは反映されていた。

原因

contentセクションにfeatureディレクトリを指定しておくのを忘れていた。初歩的なミスだったのにも関わらず、原因を特定するのに5時間ぐらいかかってしまった。
使っているライブラリに関わらず、TailwindCSSのクラスが効かない場合、まずここを確認するようにしたい。

export default {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    // ↓を忘れていた。
    // "./src/feature/**/*.{js,ts,jsx,tsx,mdx}",
  ],
}