Tailwindcssの即時反映の設定【Docker】

今回の記事

既存のdocker＋RailsアプリにTailwindcssを導入している時、
開発環境で変更が即時反映されないので全然効率的じゃないじゃん！ということで
HTMLのCSSクラスを変更したら勝手にCSSにも適用されるようにしてみたのでやり方をまとめました。

Tailwindcssの導入

./bin/bundle add tailwindcss-rails
./bin/rails tailwindcss:install
を実行
↓
dockerを再ビルド

tailwindcssの導入は成功しているがClassを変更してもtailwindが適用されない

.bin/devを実行すると適用されるが（エラーで継続しない）
変更毎にいちいち.bin/devを実行するのはめんどくさい

bin/devで行っているのはbin/rails tailwindcss:watchというコマンド
これをコンテナで直接実行すれば

root@09e95a2a975d:/app# bin/rails tailwindcss:watch

Rebuilding...
Done in 580ms.
Rebuilding...
Done in 115ms.

こんな感じで編集を感知して自動で適用してくれる。
しかしbin/rails tailwindcss:watchを実行するのもめんどくさい
なのでdockerの起動オプションに起動を含めてしまう

Dockerの起動時にtailwindの変更監視を含める

docker-compose.yml

#変更前
web:
    build: .
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails server -b 0.0.0.0"

今のコードはweb起動時に、このコマンドを行っている。
これをbin/devに置き換え、その中で実行するように変更する↓

docker-compose.yml

#変更後
web:
    build: .
    command: bin/dev

bin/dev.sh

#!/usr/bin/env sh

if ! gem list foreman -i --silent; then
  echo "Installing foreman..."
  gem install foreman
fi

export PORT="${PORT:-3000}"

export RUBY_DEBUG_OPEN="true"
export RUBY_DEBUG_LAZY="true"

exec foreman start -f Procfile.dev "$@"

bin/devはProckfileに書いてある処理を実行するファイル
なのでProckfileにdocker-composeで書いていた処理を追加する

Prockfile.dev

#変更前
web: bin/rails server
css: bin/rails tailwindcss:watch

Prockfile.dev

#変更後
web: bash -c "rm -f tmp/pids/server.pid && bundle exec rails server -b 0.0.0.0"
css: bin/rails tailwindcss:watch[always]　←超重要

重要なのは[always]
これがないとCSSがすぐに終了してしまう

↓公式にしれっと書かれている(このエラーと何時間戦ったか....)

ここまで変更出来たら再buildして起動する

web-1  | 07:55:22 web.1  | *  Max threads: 5
web-1  | 07:55:22 web.1  | *  Environment: development
web-1  | 07:55:22 web.1  | *          PID: 19
web-1  | 07:55:22 web.1  | * Listening on http://0.0.0.0:3000
web-1  | 07:55:22 web.1  | Use Ctrl-C to stop
web-1  | 07:55:23 css.1  |
web-1  | 07:55:23 css.1  | Rebuilding...
web-1  | 07:55:23 css.1  |
web-1  | 07:55:23 css.1  | Done in 645ms.
web-1  | 07:55:40 css.1  |
web-1  | 07:55:40 css.1  | Rebuilding...
web-1  | 07:55:40 css.1  |
web-1  | 07:55:40 css.1  | Done in 224ms.

こんな感じで自動で立ち上がりtailwindの変更があったらrebuildingしてくれるようになる

補足

develop環境で変更が即時反映されない時は

enviroments/development.rb

  config.assets.compile = true
  config.assets.debug = false
  config.assets.digest = false

development.rbがこのように設定されているか確認しよう