古いLaravel + tailwind で npm run watch が反映されない問題

はじめに

殴り書きですが、他に発生した方の参考になればと思い残しておきます。

環境

Laravel: v5.8
TailwindCSS: v3.0.23
Webpack: v4.44.2

MacOS Monterey 12.4

発生した現象

現在の設定では、tailwind.config.json の content 内にあるファイルのみを監視し、不要なクラスを生成しないようになっています。
npm run development では正常にクラス生成が行われているのですが、npm run watch では2回目以降の差分を書き出してくれません。

"scripts": {
  "development": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
  "watch": "npm run development --watch",
}

試したこと

1: TAILWIND_MODE=watch を設定してみる

Tailwind公式ドキュメントの #Styles don't update when saving content files セクションにある、CSSファイルが rebuild されない場合はこちらを試してください というものを発見。

残念ながら解決はできなかった。

2: Laravel Mix のキャッシュを疑ってみる

Laravel Mix のキャッシュが原因かと思い、ハッシュによるキャッシュの更新がされるように試みた。
.version() をつけ、Laravelのグローバルmix関数で読み込むことにした。

mix.js('resources/js/app.js', 'public/js')
  .sass('resources/sass/app.scss', 'public/css')
  .options({
    processCssUrls: false,
    postCss: [ tailwindcss('./tailwind.config.js') ],
  }).version();

しかし、これもダメだった。

解決方法

tailwind.config.js 内の content が正常に取得できていないのではないかと考え、それ関係で解決方法を模索してみた。
すると、こちらの リビルドが無限ループする際の対応ドキュメント を見つけた。

今回の問題とは異なるが、このドキュメントに「glob オプションがサポートされていないことが原因であり、webpack のようなビルドツールではこれがサポートされていないためこのような現象が発生する」 と書かれていた。

そのため、tailwind.config.js ファイルを以下のようにすることで解決した。

  content: require('fast-glob').sync([
    './storage/framework/views/*.php',
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue'
  ]),

参考文献