はじめに

追記(3/11)
いつのまにかTailwindにおいて、記事で取り上げていた問題が発生しなくなっています。
さらに package.json の記載内容が以下のように変更されたため、従来の記事の手順ではTailwind CSSのバージョンをv4からv3へダウングレードすることができなくなっています。

現在、rails new時に --css=tailwind オプションを指定せず、Tailwindのgemを使用してバージョンを明示的に指定してインストールする形になるかと思います。(以下にリンク)

もし、現状のv4からv3へのバージョンダウン方法をご存じの方がいらっしゃいましたら、ご教授いただけると幸いです。

{
  "name": "app",
  "private": true,
  "devDependencies": {
    "esbuild": "^0.25.0"
  },
  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --format=esm --outdir=app/assets/builds --public-path=/assets",
    
    # ↓↓この部分と
    "build:css": "npx @tailwindcss/cli -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify"
  },
  "dependencies": {
    "@hotwired/stimulus": "^3.2.2",
    "@hotwired/turbo-rails": "^8.0.12",
    "@tailwindcss/cli": "^4.0.9",　←この部分が変更
    "tailwindcss": "^4.0.9"
  }
}

↓↓gemを用いてtailwindのバージョンを指定してインストールする

追記(1/24)
↓tailwind v4.0に対応した方法の記事がきました！↓

追記ここまで

昨日あたりからtailwindをインストールしようとすると以下のエラーが出るようになってしまいました。

/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.

取り急ぎ、tailwindのバージョンを指定してインストールし直すことで対処できたので、ここにまとめます。

前提

筆者環境は以下となります

ruby 3.3.6
rails 7.2.2
docker使用

初学者の記事となるので、足りない部分や間違った部分等あれば、補足いただけると幸いです。

とりいそぎ調べてみる

まず、以下のサイトを参考に環境構築を行ったところ、前までは問題なくできていたのに、今回は以下コマンド実行時にエラーが発生しました。

docker compose run --rm web rails new . -d postgresql -j esbuild --css=tailwind --skip-kamal --skip-solid

/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.

tailwind公式のBlogを見てみると、1月22日にv4.0をリリースしたとの情報がありました。

おそらくこれが悪さをしていると考えました。
初学者の私は、取り急ぎバージョンを落として対処します。
（誰かがv4.0の新しい仕様を理解して、使用できるようにまとめてくれるのを待つ形です）

次の項目は前述の記事を参考に、以下コマンド実行後の状態からスタートします。

docker compose run --rm web rails new . -d postgresql -j esbuild --css=tailwind --skip-kamal --skip-solid

`package.json`に記載のバージョンを編集し、`yarn install`

アプリケーションディレクトリ内に存在する、package.jsonを開いていただくと、インストールしているtailwindcssのバージョンが記載してあります。
それを編集します。
変更先のバージョンはお手元で使用中のバージョンで問題ないと思います。
私の場合は^3.4.15としました。

{
  "name": "app",
  "private": true,
  "devDependencies": {
    "esbuild": "^0.24.2"
  },
  "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"
  },
  "dependencies": {
    "@hotwired/stimulus": "^3.2.2",
    "@hotwired/turbo-rails": "^8.0.12",
    "autoprefixer": "^10.4.20",
    "postcss": "^8.5.1",
    "tailwindcss": "^4.0.0" //これがtailwindのバージョン
  }
}

↓↓

    .
    .
    .
    "tailwindcss": "^3.4.15" //私が最新で使用していたバージョンに修正
  }
}

その後、yarn installを行います。

user@user:~/workspace/test$ docker compose run --rm web yarn install
[+] Creating 1/0
 ✔ Container test-db-1  Running                                                                                                                        0.0s
yarn install v1.22.22
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 7.54s.

これでtailwindのバージョンを指定してインストールできました。
ここからは、いつも通りの手順に戻れば問題なく動作しました。

さいごに

お読みいただきありがとうございました。
とりいそぎまとめたので、読みづらい部分もあったかと思いますが、ご容赦ください。
何か少しでも助けになれれば、幸いです。

はじめに

前提

とりいそぎ調べてみる

package.jsonに記載のバージョンを編集し、yarn install

さいごに

`package.json`に記載のバージョンを編集し、`yarn install`