Tailwind CSS v4 + Rails8 アプリを本番環境にデプロイしたら一部のスタイルが適用されない問題に遭遇した

最初に結論・解決策
主な構成・環境
遭遇した問題
解決までの道のり
学び・感想

Ruby on Rails 8 + Tailwind CSS v4 を使った Web アプリを本番環境にデプロイしたところ Tailwind CSS の一部のスタイルが適用されない という問題に遭遇しました。

これまでも Tailwind CSS のクラスが適用されない問題には何度か遭遇していたので、最初は「ああ、またこのパターンか」と軽い気持ちで考えていたのですが、実際には解決までかなり時間がかかってしまったので、同じ問題に遭遇した人の助けになればと思い記録をしておきます。

最初に結論・解決策

M1 Mac + Docker Desktop for Mac (Rosetta2) + Tailwind CSS v4 の組み合わせで限定的に起こるバグのようでした。

Docker Desktop の設定で「Use Rosetta for x86_64/amd64 emulation on Apple Silicon」を無効にし、かわりに Docker VMM を有効にすることで解決しました。

設定場所：Docker Desktop > Settings > General > Virtual Machine Options
変更内容：Virtual Machine Manager を Apple Virtualization framework をやめて Rosetta を無効化（代わりに Docker VMM を有効化）

私がこの解決策にたどり着けたのは以下の GitHub issue でのやりとりのおかげです。

Styles aren't generated when building a Docker image for ARM64 on a 2019 Intel MacBook Pro · Issue #17728 · tailwindlabs/tailwindcss

What version of Tailwind CSS are you using? v4.1.3 What build tool (or framework if it abstracts the build tool) are you using? Rails 8.0.2 What version of Node.js are you using? What browser are y...

github.com

ちなみにこの issue にたどり着けたのは以下の reddit からでした。

https://www.reddit.com/r/rails/comments/1l43lzt/ruby_on_rails_tailwindcss_kamal_not_working/

※ 以降、この問題の詳細、構成・環境、解決に至るまでの色々を書きます。

主な構成・環境

Ruby on Rails 8
Tailwind CSS v4 (tailwindcss-rails gem 利用)
Propshaft (アセットパイプラインのライブラリ)
※ その他、現在の Rails8 のデフォルト・推奨と考えられる構成

開発環境は macOS 15.6.1 (M1 Pro) で Kamal を使って Docker でコンテナ化した Rails アプリを Linux の VPS にデプロイしようとしていました。

遭遇した問題

Tailwind CSS (v4) の一部のスタイルが適用されなかった。全てではなく一部です。
具体的には px-2 や mt-4 など padding や margin 系のクラスが適用されない状態でした。

ローカル環境では問題なく、本番環境へデプロイしたときにだけ発生していました。更に、ローカルで RAILS_ENV=production bin/rails assets:precompile をして作られたアセットは問題なく、本番デプロイ時だけで発生していました。

解決までの道のり

Tailwind CSS が利用しているクラスだけ残し、使っていないクラスは削る機能を持っていることは認識しており、最初はそれが原因だと考えていました。あるファイルは探索対象となっているが、特定のファイルは対象となっていなくて、クラスの選別が期待通りに動いていないのではないか？というものです。

この調査のために DEBUG=* bin/rails assets:precompile とすると precompile 時の詳細なログをファイルに出力してくれるのが役に立ちました。しかしログを見ると対象の選定には誤りはないように見えます。

$ DEBUG=* ./bin/rails assets:precompile
≈ tailwindcss v4.1.12

[DEBUG] Writing debug info to: `/path/to/myapp/tailwindcss-22071.log`

Done in 126ms

AI も駆使しながら調査を進める中、以下のようなことにはトライしてみました（しかしすべて効果なし）

対象クラスを Tailwind CSS が検出できていないことを疑う
- tailwind.config.js を配置して、content に対象ファイルを明示する
- app/assets/tailwind/application.css に @source directive を用いて対象ファイルを明示する
権限問題を疑う
- デプロイ時に、権限の問題で参照あるいは書き込みができていない可能性を疑い、Dockerfile に権限周りの更新を追加する
キャッシュを疑う
- bin/rails assets:clobber や bin/rails tailwindcss:clobber といった削除処理を最初に実行する
本番環境固有の処理を疑う
- 本番のみ bootsnap のコンパイル処理が動いているため止めてみる。順番を変えてみる

いずれも解決せず、仕方なく Tailwind CSS のバージョンダウンも検討しつつ検索をしていたところ、解決策のセクションに記載した Reddit の記事にたどり着いた、、という流れでした。

学び・感想

ARM64 (M1 Mac) で x86_64 用コンテナをビルドする際、Docker Desktop が行うクロスプラットフォームのエミュレーション方式 (Rosetta2 など) によって特定のソフトウェアの動作が変わることを体験として学びました。 Docker や CPU エミュレーションまわりの理解不足は感じました。Docker → 環境差異は出にくいはず、という感覚でいたのは良くなかったです。

今や日常となった AI を使って調査を手伝ってもらいましたが、このように自分の理解度が曖昧な箇所だと真偽の判定が難しいですし、疲弊してくるととりあえず言っていることをやってみるかという気持ちにもなってきます。詰まっている状況で「原因がわかりました」とか言われると嬉しくなっちゃいますが、振り返ってみると解決策には遠い提案が多かったです。
ハズレが多い（やりとりが長く続く）ということは同じ問題に遭遇している人が少ないのでは、みたいなことにも気がつけると良いのかもしれませんね・・

時間はかかりましたがやはりデバッグ・調査をする過程で得られる経験・学びはやはり密度が高いなと改めて感じました。Kamal の使い方、コンテナ環境での調査、precompile の動作理解が深まるなど、得られたものも多かったように思います。