0
Help us understand the problem. What are the problem?

posted at

updated at

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が反映されました。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
0
Help us understand the problem. What are the problem?