LaravelでのTailwind CSSの設定方法
本文書では、Laravel環境でのtailwindcssの設定手順を説明します。Laravelのバージョン6.xがインストールが完了し、npm install && npm run devの実行が完了した後の状態から開始します。
Laravelのインストールについては下記を参考にしてください。
Tailwindとは
tailwindはCSSフレームワークの一つですが、bootstrapやbulmaなどのフレームワークとは異なります。例えばbootstrapではボタンやカードなどのコンポーネントが用意されておりだれでも同じデザインのボタンやカードを作ることができます。すばやくサイトをデザインすることはできますが、カスタムデザインのサイトを作ろうとした場合には簡単ではありません。
その反面、tailwindではカードやボタンのようなコンポーネントはデフォルトでは用意されておらずユーティリティクラスを使って各自がカスタムデザインのボタンを作成することになります。
ユーティリティクラスとは背景が赤であればbg-red, 文字の大きさを太めにしたい場合はfont-boldといった事前にtailwindで準備されているクラスです。それらのユーティリティクラスを直接要素のclassに設定(div class=”bg-red font-bold”のように)を行います。HTMLの要素のclassにユーティリティクラスを設定することになるので独自のクラスを要素に追加し、CSSファイルでそのクラスに対するスタイルを個別に設定する必要がなくなりhtmlファイルだけでデザインを行うことができます。
tailwindcssのインストール
tailwindcssはnpm installコマンドを使ってインストールを行います。コマンドはLaravelのインストールディレクトリで実行してください。
$ npm install tailwindcss
設定ファイルの作成
インストール完了後、tailwindコマンドを使って設定ファイルtailwind.config.jsを作成します。 tailwind.config.jsでカスタマイズを行うことができます。
$ npx tailwind init
tailwindcss 1.1.3
✅ Created Tailwind config file: tailwind.config.js
webpack.mix.jsファイルの更新
Laravelでtailwindを使うためLaravel MIXを利用して行います。 Laravelのインストールディレクトリにある設定ファイル webpack.mix.jsに設定を追加します。
tailwindはpostCssプラグインです。Laravel MIXではpostCssをサポートしているのでoptionsを使って設定を行います。
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.options({
processCssUrls: false,
postCss: [ tailwindcss('./tailwind.config.js') ],
});
次にresource¥sass¥app.scssファイルを開いて下記の3行で上書きします。
@tailwind base;
@tailwind components;
@tailwind utilities;
Laravelでtailwindを使用するための設定は完了です。
tailwindの動作確認
resouces¥vies¥welcome.blade.phpを開いてtailwindでデザインが設定できるか確認を行います。
ユーティリティクラスflexを使って設定を行い、ブラウザの中央に文字を表示させる設定を行っています。
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body class="flex justify-center items-center h-56">
<h1 class="text-3xl text-green-500">Hello Tailwind</h1>
</body>
</html>
ビルドした作成されるCSSをファイルも設定する必要があります。
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
npm run watchコマンドを実行してビルドを行い、tailwindの設定が反映されているのか確認を行います。
$ npm run watch
ブラウザで確認すると画面の中央あたりに緑の文字列が表示されることが確認できます。
サイズを減らす
tailwindcssはwebpackのproductionでビルドしても1Mbyte近くあるのでほとんどユーティリティクラスを使用していない場合は必要のないクラスは削除したいものです。
purgeCssを利用することで使用していないクラスをビルドしたファイルから削除することができます。
laravel-mix-purgecssというライブラリが存在するのでnpmコマンドでインストールを行います。
$ npm install laravel-mix-purgecss --save-dev
インストール完了後にwebpack.mix.jsファイルを下記のように更新してください。
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss')
require('laravel-mix-purgecss')
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.options({
processCssUrls: false,
postCss: [tailwindcss('./tailwind.config.js')],
}).purgeCss();
npm dev productionコマンドを実行してpurgecssを導入前と導入後のサイズCSSのサイズを比較してください。導入後のサイズが非常に小さくなっていることが確認できるはずです。
//導入前
$ npm run production
DONE Compiled successfully in 17185ms 4:12:23 PM
Asset Size Chunks Chunk Names
/css/app.css 3.62 KiB 0 [emitted] /js/app
/js/app.js 271 KiB 0 [emitted] [big] /js/app
/js/app.js.LICENSE.txt 896 bytes [emitted]
// 導入後
$ npm run production
DONE Compiled successfully in 15266ms 4:13:24 PM
Asset Size Chunks Chunk Names
/css/app.css 821 KiB 0 [emitted] [big] /js/app
/js/app.js 271 KiB 0 [emitted] [big] /js/app
/js/app.js.LICENSE.txt 896 bytes
