Laravel Mixをインストールしてtailwind CSSを導入する

Laravelのフロントエンドの便利パック的なやつのインストール方法。
※Laravel Sailをインストール済みとする

まずはnodeの確認

sail node -v

#実行結果
v16.15.0

npmインストール

sail npm install

npmインストール完了したら

sail npm run development

変更の都度ビルドさせる

sail npm run watch

Laravel Breeze等でインストールしてない場合は

sail npm install -d tailwindcss
sail npx tailwindcss init

resources/css/app.cssに追記

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

webpack.mix.jsに追記

mix.js('resources/js/app.js', 'public/js')
  .postCss('resources/css/app.css', 'public/css', [
    require('tailwindcss'),
]).version();

HTMLに追記

<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<link rel="stylesheet" href="{{ mix('js/app.js') }}">