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

11855 ワード
Laravel7 Laravel tailwindcss FontAwesome Laravel テキストリンク

今回の題

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

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

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

手順

tailwindcssのインストール

インストール。

npm install tailwindcss

resources/sass/app.scssを以下のように変更。

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

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

npx tailwindcss init

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

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のドキュメントにあるものです。
最新v2.0.3のドキュメントはLaravel8向きなので注意。

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でもお好きなように。

npm run dev

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

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>

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

php artisan serve

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

fontawesomeのインストール

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

インストール。

npm install --save @fortawesome/fontawesome-free

resources/sass/app.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に１行追記。

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') ],
    });

コンパイル。

npm run dev

以上！！！