Rails7 に Tailwind CSS を導入する

Rails7以前で Tailwind CSS を使用したい場合はWebpackerを使って yarn add tailwindcss して ほげほげファイルを追加して〜〜としていたと思います。
Rails7からはWebpackerが標準ではなくなったので、導入方法が変わりました。

プロジェクト作成時に導入する方法と、既存のプロジェクトに途中から導入する方法をまとめてみました。
（今回はesbuildを使用してます。）

プロジェクト作成時に導入する場合

1. rails new mofmof -j esbuild --css tailwind でプロジェクトを作成する

2. 以下を package.json に追加する

   "scripts": {
     "build": "esbuild app/javascript/*.* --bundle --sourcemap --format=esm --outdir=app/assets/builds --public-path=/assets",
     "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify"
   } 
   

既存のプロジェクトに途中から導入する場合

1. 以下を Gemfile に追加

   gem "cssbundling-rails"
   

2. bundle install を実行
3. bin/rails css:install:tailwind 実行

4. 以下を package.json の scripts に追加する

   "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify"
   

自分で作成したCSSファイルを読み込みたい場合

例えば app/assets/stylesheets/mofmof.css というCSSファイルを読み込みたい場合はapp/assets/stylesheets/application.tailwind.css を以下のように変更します。

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "mofmof";

ポイント

ポイント1
Railsコマンドで導入するので諸々の設定を自動で行なってくれます。

ポイント2
package.json への追記は手動で行う必要がありますが、忘れてしまった場合でも Railsサーバーが起動しない（正確には立ち上がった後にexitする）ので、原因究明がしやすいと思います。

ポイント3
自動で作成された application.tailwind.css の中身は以下のようになっています。

@tailwind base;
@tailwind components;
@tailwind utilities;

しかしこのままだと、違うCSSファイルをimportしようとしても読み込まれない罠があります。
Tailwind CSSあるあるかもしれませんね。

終わり

これだけで使えるようになるのー！という感動がありました！

手順に違いはあれど、最終的に生成・変更される差分が無くなったのが意外だなと思いました。（昔は手順変えるだけで成果物が違うものになったイメージが残っています。。。）