※執筆者はプログラミング初学者になります。もし、記載内容に間違いなどありましたらMattermostのDMなどで、60期A清水こうへいまでご連絡ください。

MattermostURL : https://chat.runteq.jp/runteq/channels/times_60a_shimizu_kohei

【執筆者の環境】

Macbook air(M1チップ)

【なぜこの資料を作ったのか?】

2月7日のデプロイイベントで使っていた資料を元に環境構築していたところ、下記のコマンドで自然にtailwindv4がインストールされることを確認したことがキッカケです。

$ docker compose run --rm web rails new . -d postgresql -j esbuild --css=tailwind

上記コマンドを実行すると、最後はこの画像のように表示され、v4でインストールされていることが分かります。

スクリーンショット 2025-03-11 17.10.43.png

Q. v4がダメなのか? ダメというわけでは無いですが、プラグイン系が未対応の場合があるので注意が必要です。(例:daisy UIは対応しましたが、MerakiUIが未対応)また現時点では、v3の導入技術記事が多いため、初学者にとってはv3でやった方が躓いた時にリサーチで解決しやすいです。

Q. v3に戻す方法は? 色々試していますが、まだpushしていないのであれば、一旦、そのブランチは捨てたほうが、対応としては早そう。 なぜなら、v4は package.jsonや application.tailwind.cssが、バージョンアップの恩恵でスッキリしており、そこをv3に戻すのは少々むずかしい印象…。

参考記事)tailwind v4の変更点がまとまっている記事

(ちなみに、package.jsonやapplication.tailwind.cssをv3のときのファイルと置き換えてもtailwindcssが反映されず、どうすればダウングレードできるかは研究中です…。)

以上、つらつらと経緯をお話しましたが、ここから本編になります。