Railsアプリでtailwind css v4を使う方法

はじめに

かけだしのバックエンドエンジニアをしているとぴ(@topi_log)です。
1月22日にtailwind cssが正式にv4へアップグレードしました。

これにともない、Railsアプリケーションを作成時にcssでtailwindを指定するとエラーが発生するようになりました。

Done in 1.64s.
  Add build:css script
  Add build:css script
         run    npm pkg set scripts.build:css="tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify" from "."
         run    yarn build:css from "."
yarn run v1.22.22
$ tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify
/bin/sh: 1: tailwindcss: not found
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
         run  bundle install --quiet

今回はv4を使うための方法をご紹介します。

v3を使いたい場合

v3を使いたい場合は下記の記事をご覧ください。

筆者環境

確認したのは以下の環境です。

• macbook pro m3 / Apple Silicon / Sonoma14.5
• WSL2 / Ubuntu22.4
• Ruby 3.3.6
• Rails 7.2.1
• Docker
• yarn

対処法

rails newしてエラーが出たあとの対処法です。
解説は最後にします。

1. Gemfileに下記を追記

gem "tailwindcss-rails", "~> 4.0.0.rc1", github: "rails/tailwindcss-rails", branch: "main"

2. 下記コマンドを実行

Dockerを使っている場合

$ docker compose run --rm web bundle install
$ docker compose run --rm web bin/rails tailwindcss:upgrade

ログ

owner@owner:tailwind_v4$ docker compose run --rm web bundle install
[+] Creating 1/0
 ✔ Container tailwind_v4-db-1  Running                                                               0.0s
Fetching https://github.com/rails/tailwindcss-rails.git
Fetching gem metadata from https://rubygems.org/.........
Resolving dependencies...
Fetching tailwindcss-ruby 4.0.0 (x86_64-linux-gnu)
Installing tailwindcss-ruby 4.0.0 (x86_64-linux-gnu)
WARN: Unresolved or ambiguous specs during Gem::Specification.reset:
      stringio (>= 0)
      Available/installed versions of this gem:
      - 3.1.2
      - 3.1.1
WARN: Clearing out unresolved specs. Try 'gem cleanup <gem>'
Please report a bug if this causes problems.
Bundle complete! 18 Gemfile dependencies, 104 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
1 installed gem you directly depend on is looking for funding.
  Run `bundle fund` for details
owner@owner:tailwind_v4$ docker compose run --rm web bin/rails tailwindcss:upgrade
[+] Creating 1/0
 ✔ Container tailwind_v4-db-1  Running                                                               0.0s
       apply  /usr/local/bundle/bundler/gems/tailwindcss-rails-65dd6c5ef76e/lib/install/upgrade_tailwindcss.rb
  Default tailwind.config.js is missing!

以上です！
あとはDB設定したりしてサーバーを起動すれば動くと思います。

解説

今回はRails7系統で行ったのでRails7を前提に記載します。
Rails7でtailwind cssを使う際、tailwindcss-railsというrails公式が出しているGemを利用してます。

上記公式では、「tailwindcss-railsを使うことでtailwind css v3が使えるようになります」と記載されています。
Rails7（今回は7.2）ではそもそもtailwind cssはv3までのみをサポートしている状態です。
ではその使用しているGemtailwindcss-railsを見に行ってみます。

こちらのGitHubのDiscussionsに、tailwind css v4の議題があります。

「TailwindCSS v4 - アップグレード体験レポート」と言った内容で、内容を見ていくとtailwindcss-railsがプレリリースのv4でtailwind css v4が利用できるようになったというものです。
ここでヒントを得たので、Gemfileにtailwindcss-rails v4を使えるようにし、且つtailwind cssをv4へアップグレードすることにしました。
プレリリースされたものはmainブランチにすでにあるようなので、GitHubのmainブランチから直接Railsアプリケーションに使うように指定します。
それがGemfileに追記した下記です。

gem "tailwindcss-rails", "~> 4.0.0.rc1", github: "rails/tailwindcss-rails", branch: "main"

追記した後にbundle installしGemをアプリに追加します。
そのあと、READMEのアップグレードステップの内容を下に、tailwind cssのアップデートを行います。
それが下記コマンドです。

bin/rails tailwindcss:upgrade

今回はDockerを使ったのでコマンドは下記になります。

docker compose run --rm web bin/rails tailwindcss:upgrade

※webの部分はコンテナ名が入ります。

補足

現在tailwindcss-railsのv4はプレリリース段階ですが、正式リリースした場合はGemfileの記述が変わるかと思います。
適宜対応するようにしてください。

終わりに

少し雑になってしまいましたが、恐らく上記対応でtailwind css v4が使えるようになると思います。
ご参考になれば幸いです！