#今回の題
最新のtailwindcssのドキュメントにはLaravelへのインストール方法が乗っています。
https://tailwindcss.com/docs/guides/laravel
ただ、見る限りこのドキュメントが想定しているバージョンはLaravel8のようなので、それ以前のバージョンだとドキュメント通りにやっても上手くいきません。(webpack.mix.jsの記述が異なるため)。
なので、それ以前のバージョンのLaravelだと少し書き方を変える必要があります。
ここでは私が主に使っているlaravel7系にインストールしてみます。
#手順
##tailwindcssのインストール
インストール。
npm install tailwindcss
resources/sass/app.scssを以下のように変更。
@tailwind base;
@tailwind components;
@tailwind utilities;
次に、Tailwind config fileの作成。
必須ではないですが、カスタムしたりPurgeオプションを使ってビルドサイズを縮小することができるので作成することをお勧めします。
npx tailwindcss init
そうしたら、プロジェクトディレクトリにtailwind.config.jsが出来ているので以下のように編集します。
※vueファイルは必要に応じて書き換えてください。
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向きなので注意。
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が使えるか確認。
簡単なカードを作ったので表示してみます。
<!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 に以下を追記します。
@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に１行追記。
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
以上！！！