[Laravel7.x] TailwindcssをインストールしてアイコンにFontAwesomeを使う

#今回の題
最新のtailwindcssのドキュメントにはLaravelへのインストール方法が乗っています。
https://tailwindcss.com/docs/guides/laravel

ただ、見る限りこのドキュメントが想定しているバージョンはLaravel8のようなので、それ以前のバージョンだとドキュメント通りにやっても上手くいきません。(webpack.mix.jsの記述が異なるため)。

なので、それ以前のバージョンのLaravelだと少し書き方を変える必要があります。
ここでは私が主に使っているlaravel7系にインストールしてみます。

#手順

##tailwindcssのインストール
インストール。

```terminal
npm install tailwindcss
```
`resources/sass/app.scss`を以下のように変更。

```scss:resources/sass/app.scss 
@tailwind base;
@tailwind components;
@tailwind utilities;
```

次に、Tailwind config fileの作成。
必須ではないですが、カスタムしたりPurgeオプションを使ってビルドサイズを縮小することができるので作成することをお勧めします。

```terminal
npx tailwindcss init
```

そうしたら、プロジェクトディレクトリに`tailwind.config.js`が出来ているので以下のように編集します。
※vueファイルは必要に応じて書き換えてください。

```js:ctailwind.config.js
module.exports = {
   purge: [
     './resources/**/*.blade.php',
     './resources/**/*.js',
     './resources/**/*.vue',
   ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}
```

次に`webpack.mix.js`を書き換えます。
この設定は、tailwindcssのv1.9.0の[ドキュメント](https://v1.tailwindcss.com/docs/installation#using-tailwind-cli)にあるものです。
最新v2.0.3のドキュメントはLaravel8向きなので注意。

```js:webpack.mix.js
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .options({
        processCssUrls: false,
        postCss: [ tailwindcss('./tailwind.config.js') ],
    });
```

コンパイル。
watchでもhotでもお好きなように。

```terminal
npm run dev
```

そしたら、tailwindcssが使えるか確認。
簡単なカードを作ったので表示してみます。

```php:resource/view/welcome.blade.php
<!doctype html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>

<div class="container mx-auto flex justify-center my-10">
  <div class="border-2 border-gray-300 p-6 shadow-md rounded-lg">
    <div>
      <p class="text-lg text-gray-600">Hello Tailwindcss</p>
    </div>
  </div>
</div>

</body>
</html>
```

ビルトインサーバーを立ち上げて、、

```terminal
php artisan serve
```

![スクリーンショット 2021-03-19 2.36.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546124/81e6e33c-3f37-8f62-f811-f7f181797e32.png)

画像のようになっていればOK。

##fontawesomeのインストール

フリー版を使います。
フリーとはいえ1,609種類のアイコンが揃っており、さらに商用利用も可能な凄まじい子です。

インストール。

```terminal
npm install --save @fortawesome/fontawesome-free
```

`resources/sass/app.scss `に以下を追記します。

```scss:resources/sass/app.scss 
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/brands';
```

`webpack.mix.js`に１行追記。

```js:webpack.mix.js
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .copyDirectory('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/webfonts') //　追記
    .options({
        processCssUrls: false,
        postCss: [ tailwindcss('./tailwind.config.js') ],
    });
```

コンパイル。

```terminal
npm run dev
```

以上！！！