9
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

[rails] tailwindインストール時にexit code 127が出た時の対処法 [tailwind]

Last updated at Posted at 2025-01-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のバージョンを指定してインストールできました。
ここからは、いつも通りの手順に戻れば問題なく動作しました。

さいごに

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

9
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?