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

# はじめに
かけだしのバックエンドエンジニアをしているとぴ([@topi_log](https://x.com/topi_log))です。
1月22日にtailwind cssが正式にv4へアップグレードしました。

https://tailwindcss.com/blog/tailwindcss-v4

これにともない、Railsアプリケーションを作成時にcssでtailwindを指定するとエラーが発生するようになりました。
```bash
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を使いたい場合は下記の記事をご覧ください。

https://qiita.com/YamzknA/items/53478370761f716b068f

# 筆者環境
確認したのは以下の環境です。
- macbook pro m3 / Apple Silicon / Sonoma14.5
- WSL2 / Ubuntu22.4
- Ruby 3.3.6
- Rails 7.2.1
- Docker
- yarn


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

## 1. Gemfileに下記を追記
```Gemfile
gem "tailwindcss-rails", "~> 4.0.0.rc1", github: "rails/tailwindcss-rails", branch: "main"
```

## 2. 下記コマンドを実行
Dockerを使っている場合
```bash
$ docker compose run --rm web bundle install
$ docker compose run --rm web bin/rails tailwindcss:upgrade
```
<details>
<summary>ログ</summary>

```bash
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!
```
</details>

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

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

https://github.com/rails/rails/blob/7-2-stable/guides/source/asset_pipeline.md#tailwindcss-rails

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

https://github.com/rails/tailwindcss-rails

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

https://github.com/rails/tailwindcss-rails/discussions/450

「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のアップグレードステップ](https://github.com/rails/tailwindcss-rails?tab=readme-ov-file#upgrade-steps)の内容を下に、tailwind cssのアップデートを行います。
それが下記コマンドです。
```bash
bin/rails tailwindcss:upgrade
```
今回はDockerを使ったのでコマンドは下記になります。
```bash
docker compose run --rm web bin/rails tailwindcss:upgrade
```
※webの部分はコンテナ名が入ります。

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

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