Tailwind CSS for RailsがDockerコンテナ内で反映されないときの対処法。purge設定に"html.erb"を含めていないことが原因

Tailwind CSS for Railsがローカルの開発環境では動いていたのに、Dockerコンテナ内で突然反映されなくなるという現象に遭遇しました。

まず、よくある原因は次の通りです。

よくある原因

tailwind.config.jsのpurge設定が正しくない。

# ディレクトリ構造(Dockerコンテナ内)
/var/www
     └── myapp  # Rails
         ├── app
         │   ├── ...
         │   ├── ...
         │   └── views
         ├── ...
         ├── config
         │   ├── ...
         │   ├── tailwind.config.js
         │   └── ...
         ├── ...
         └── ...

myapp/config/tailwind.config.js

module.exports = {
  content: [
    // "./app/**/*.{html,js}",        <= パス間違い
    "../myapp/app/**/*.{html,js}",  //<= 正
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

※"puege"はtailwindcss v3.0 から"content"に変更されたようです。

しかし、この設定ではRailsアプリ上で意図したようにCSSが反映されません。
Tailwind CSSをRailsで運用する場合にはもう一つ注意点があります。

結論

tailwind.config.jsのpurge設定にhtml.erbを指定する。

myapp/config/tailwind.config.js

module.exports = {
  content: [
    // "../myapp/app/**/*.{html,js}",
    "../myapp/app/**/*.{html.erb, html, js}", //<="html.erb"を指定する
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

$ rails tailwindcss:buildを実行後、無事にTailwind CSSが反映されました。