tailwindcssをインストールできなかった話【解決済み】

今回は僕がLaravelでアプリケーションを作成しているときに遭遇したTailwindcssをインストールできなかったお話とそれを解決した方法をご紹介したいと思います。

問題が生じた背景

僕はYoutubeの教材でLaravelを用いたアプリケーションの開発の勉強をしていました。その教材ではcssのデザインにTailwindcssという、cssのフレームワークを使うそうでした。教材の冒頭でLaravelをインストールし終わったあとに、このTailwindcssもインストールするように案内されます。そのときの教材に書いてあるコードは以下です。

npm install tailwindcss

これをターミナルに入力して実行しました。すると次のようなエラーが返ってきました。

npm ERR! code ENOTDIR
npm ERR! syscall open
npm ERR! path /Users/tomoyasusunagawa/node_modules/color-name/npm-shrinkwrap.json
npm ERR! errno -20
npm ERR! ENOTDIR: not a directory, open '/Users/tomoyasusunagawa/node_modules/color-name/npm-shrinkwrap.json'

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/tomoyasusunagawa/.npm/_logs/2021-08-09T08_50_35_395Z-debug.log

最初はビックリしましたが、よく読むと真ん中ら辺に「npm-shrinkwrap.jsonはディレクトリではありません」みたいなことを言われています。

解決した方法

（そんなこと、僕に言われても）という気も一瞬しましたが、すかさずGoogle先生に聞いたところ、次のように実行すると期待通りにTailwindcssをインストールできると書いてありました。

$ cd [PATH_TO_DIR]
$ npm init -y
$ npm install tailwindcss postcss-cli autoprefixer

作業ディレクトリに移動して、npmパッケージを使う準備をして、tailwindcssのインストールをする、的な意味のコマンドらしいです。

無事にさきほどのエラー文も返って来なくなったので、正常にインストールできたことが確認できました。