🚄

Tailwind CSS for Railsを使って、NodeをインストールせずにTailwind CSS 3を導入する

2021/12/21に公開

Rails

Ruby

Tailwind CSS

tech

みなさんこんにちは。この記事はRuby on Rails Advent Calendar 2021の20日目の記事です。
20日は誰も埋めていなかったようなので（と言いつつもう日付も変わってしまっているのですが）、Tailwind CSS for Railsというgemについて書きます。

Tailwind CSSとRails

https://tailwindcss.com/

Tailwind CSSは最近流行のCSSフレームワークで、Utility-Firstと呼ばれている思想に基づいています。これはある意味、従来のCSS設計のベストプラクティスの真逆を行くようなもので、class="flex items-baseline mt-4 mb-6 pb-6 border-b border-gray-200"みたいなスタイルの指定が直接タグに書かれてしまうものです。

長らくCSSを使いこなしていて、OOCSSとかBEMとかにも慣れている方も（そういう方こそ）、TailwindのHTML内に埋め込まれた謎の記法にはびっくりしてされていたようです。しかしながら、ReactやVue等の普及でフロントエンドでのコンポーネント指向が強まったおかげでCSS自体でコンポーネントを考慮した命名規則を駆使しなくても良くなったこと（ちなみにRailsのViewでコンポーネントを使う場合、最近はViewComponentを使う場合が多い印象です）や、PurgeCSSなどを使ってCSS定義のうち必要な部分のみを切り出すことができるようになったため巨大なUtility CSSを用意しても本番環境でのCSSはシンプルにできるようになった等のトレンドの変化もあり、好き嫌いや開発現場での事情等はあるにせよ、一定の評価は広く得られているのではないかと思います。

そんなわけでRailsでもTailwindを使いたい・使っている人はいましたが、これまでRailsでTailwindする場合、おおよそ以下のようなやり方が一般的だったかと思います。

Webpacker、Simpacker等と組み合わせてnpmでインストールする
Next/Nuxt等を使ったフロントエンド側にお任せして、Rails側では何もしない
CDN上にあるTailwindを使う

しかし、Rails 7ではWebアプリケーション開発の概念圧縮(Conceptual Compression)を推し進めるべく、Node.jsを使わなくてもRails自身でいろいろできるよう、いろいろと新たなgemの開発が進められてきました。
そんな流れの中、TailwindについてもNode.js不要で使える仕組みが期待されてきたところに現れたのが、このTailwind CSS for Railsです。

Tailwind CSS for Railsとその経緯

Tailwind CSS for Railsはその名の通り、RailsでTailwindを扱うためのgemで、2021年1月からDHHにより開発が開始されました。v1.0.0が正式リリースされたのは、日本時間では12月15日、Rails 7のリリースの前日でした。

しかしながら、12月20日現在のTailwind CSS for Railsのバージョンはv2.0.2です。……これはどういうことなのでしょうか？

実は、このリリースの前後に大きな動きがあったのでした。順をおって説明します。

Rails 7のリリースに向けて、　12月になった頃からTailwind CSS for Railsの開発にも動きが見えてきました。12月3日にはv0.5.4もリリースされました。Rails 7も12月７日にv7.0.0のRC1が公開されています。

ところが12月10日、Tailwind CSS v3.0がリリースされます。

このv3.0は、v2.1で導入されたJITエンジンが標準になっており、実際のところNode.jsがないと利用が難しいものとなっていました。

そのため、12月15日にリリースされたTailwind CSS for Railsのv1.0.0では、Tailwind CSS v2.1に対応したバージョンとしてリリースされています。Tailwind CSS v3対応は今後の課題となっており、今すぐ使いたい人はcssbundling-railsと合わせてNode.jsを使って利用するしかない、という状況でした。

もちろん、これはRails 7のポリシー的には好ましくないことであり、それならわざわざ独立したgemにする必要もなかったのでは…？　ということにもなりかねません。

ところが、12月17日、Tailwindの公式ブログにて、Standalone CLIがアナウンスされます。

このブログエントリでは、Railsや PhoenixのようなNode.jsやnpmを使わない環境でも、Tailwindの全性能が使えるように、自己完結型のCLIを用意したのでこれを使ってね、というものでした。びっくりです。

もっとも、このStandalone CLIは、要するにTailwind CSSのJITエンジンをNode処理系ごとまとめて1個のでかいバイナリにしたものです。Rubyで言えばExerbとかTraveling Rubyみたいなものに相当するようです。普通にNode.js使ってるっしょ……と言いたくなりますが、まあnpmでいろいろ作業しなくて済むのは便利です。

これを受けて、12月18日にこのCLIを取り込むpull requestがマージされ、その日のうちに2.0.0.rc1と2.0.0正式版がリリースされます。v1.0.0ではPurgeCSSのようなことをRubyで行うPurgerがあったのですが、それも2.0.0で丸ごと消されています。CLIがよろしくやってくれるのでRuby側での処理は不要、というわけです。

その後細かい修正を行い、12月20日にv2.0.1とv2.0.2が立て続けにリリースされ、現在に至る、という流れです。

今後については、おそらく仕組みから考えるとTailwind CSSのバージョンアップごとにTailwind CSS for Railsも適宜リリースされていく形になるんではないかと思われます。

使い方

経緯はいろいろありましたが、最終的にはStandalone CLIをあわせてダウンロードする形になったため、使い方としてはシンプルです。

インストールについては、rails newで新規のアプリを作る際に合わせてインストールする方法と、既存のRailsアプリにあとからインストールする方法があります。

前者の場合、

rails new sample-app -c tailwind

といったように、-c tailwindのオプションを指定すると、自動的にインストールされます。

後者の場合は、

bin/bundle add tailwindcss-rails
bin/rails tailwindcss:install

というように、Gemfileに追加してからbundle installし、railsコマンドでインストールできます。

インストールしたあとは、

bin/dev

でRails 7標準の起動方法でRailsアプリを立ち上げると、あとはerbファイルを更新すると同時にTailwindのJITが実行されます。アクセスログは以下のようになります。

03:26:33 css.1  | 
03:26:33 css.1  | Rebuilding...
03:26:33 css.1  | Done in 56ms.
03:26:45 css.1  | 
03:26:45 css.1  | Rebuilding...
03:26:45 css.1  | Done in 50ms.

まとめ

Tailwind CSS for Railsが出てきた当初は、便利そうだけどちょっと無理矢理感も否めないかな…と感じていたのも事実です。以前のRailsで使われていた（そして廃れた）、JSをgemでwrapする手法も脳裏をよぎったりもしました。さらにTailwind CSS v3.0の登場に至っては一体どうなるのかと心配したりもしたのでしたが、Standalone CLIの登場により一気に状況が変わり、安定して使えそうなツールに生まれ変わったようでした。

興味深いのはStandalone CLIが利用しているpkgです。これはあのVercelが提供しているツールで、READMEによれば基本的にはコンテナ内で使うためのものだそうです。それにしても、Node.jsによるフロントエンドのエコシステムを牽引するVercelが、Node.js不要なエコシステム作りにも大きな影響を与えているのは、思わぬ因縁を感じます。

というわけで、Rails 7でも安心してTailwind CSSを使っていきましょう。

Tailwind CSSとRails

Tailwind CSS for Railsとその経緯

使い方

まとめ

Discussion