Rails 7でTailwind CSSを使ってみた

Rails 7の新機能を触ってみたいと思い、今回はその中でもTailwind CSS for Railsというgemを使ってNode.jsやWebpack無しでモダンなフロントエンド開発環境をお試しで作ってみたいと思います。

脱モジュールバンドラー

Rails 7では、cssbundling-railsというGemをインストールすることで、 Tailwind CSS、 Bootstrap、 Bulma、PostCSS、 Dart Sassを使用してCSSを結合・最適化し、Railsのアセットパイプラインで配信ができるようになったそうです。Webpackerなどのバンドラーを使わなくとも良くなったということですね。
その中でも今回はTailwind CSSを使ってみました。

ちなみにバンドラーを使わないメリット等含め、Rails 7におけるフロントエンド周りの刷新についてDHH氏のブログ記事をまとめた以下記事が参考になりました。

Tailwind CSS is 何？

本筋から逸れてしまうため、簡単に自分なりにまとめると

• あらゆるスタイリングに対応したクラスをまとめたライブラリ
• クラス名にはh-12 w-12 p-6 max-w-sm mx-autoのように適用したいスタイルの名前を指定をする
  • BEMのようなレイアウト上意味のある命名をするやり方とは真逆のアプローチ
• メリットは命名に悩む時間が減る、CSSファイルが無闇に増えない、安全な変更が可能。レスポンシブデザインにも対応
• 保守性はコンポーネント化することでカバーする。つまり、ReactやVue.jsなどのライブラリ使用が前提

といった内容のようです。

Tailwind CSS、使ってみた

インストール

新規アプリケーション作成の場合、rails newにオプションを付けるだけです。

$ rails new myapp --css tailwind

既存アプリケーションの場合はGemをインストールした上でTailwind CSSを入れましょう。

Gemfile

gem 'cssbundling-rails'

$ bin/bundle install
$ bin/rails css:install:tailwind

サンプルTodoモデル作成

scaffoldでTodoモデルを作成してみます。

$ rails g scaffold todo name:string limit:date

# Tailwind CSSのビルドが必要
$ rails tailwindcss:build

rails sでサービスを起動している場合、手動でCSSをビルドする必要があります。
上記ビルドコマンドを実行することでapp/assets/builds/tailwind.cssがビルドされます。

CSSを修正する度に手動で再ビルドが必要なのはイケてないのですが、rails sではなくbin/devでサービスを起動することにより、Tailwindのスタイル修正の都度、自動でビルドが走るようになるみたいです。

・・・が、私のDocker環境でrails sの代わりにbin/devで起動すると、起動と同時にサービスが落ちてしまい上手く動作しませんでした。エラーログも出ないため、一旦手動でビルドします。これが解消できないと実用は厳しいかな。。
→2022/4/5追記
docker-compose.ymlでRailsアプリのコンテナにtty: trueオプションを追加することで解消できました！
コメントで教えてくださった @hazm さん、ありがとうございます。

動作確認

これは驚いたんですが、scaffoldで自動作成されたviewの各DOMのクラス名にTailwind CSSを適用するクラス名が自動で設定されています。すごい！
これで無事Tailswind CSSが適用されていることを確認できました。

index.html.erb

<div class="flex justify-between items-center">
  <h1 class="font-bold text-4xl">Todos</h1>
  <%= link_to 'New todo', new_todo_path, class: "rounded-lg py-3 px-5 bg-blue-600 text-white block font-medium" %>
</div>

<div id="todos" class="min-w-full">
  <%= render @todos %>
</div>

使ってみた所感

• 導入だけは何とかできたがTailwind CSSを使いこなすには学習コストが多くかかりそう
• 当たり前だがサンプルアプリ程度の規模ではバンドラーを使わないメリットは享受しにくい
• リリース間もない機能を使ってみたのが初めてで、情報を集めることの難しさを知った
• 本当はHotwireやTurboを使って簡単なSPAを作るところまでやりたかった…

まだ使用例も少ない中、自分の力では導入して動作を試すところが精一杯でした。
次はもう少し突っ込んだところまでやれたらいいなと思います。

参考記事