LaravelでのTailwind CSSの設定方法 | アールエフェクト

本文書では、Laravel環境でのtailwindcssの設定手順を説明します。Laravelのバージョン6.xがインストールが完了し、npm install && npm run devの実行が完了した後の状態から開始します。

Laravel 7.Xでも利用することができます。またLaravel mixが入っていないLaravel5.3でもLaravel6, 7からpackega.jsonファイルやwebpack.mix.jsなど関連するファイルを複製することでLaravel6や7と同様の方法でLaravel mixやtailwindを利用することができます。

Laravelのインストールについては下記を参考にしてください。

あわせて読みたい

Laravel6.xのインストール

1 Tailwindとは
2 tailwindcssのインストール
3 設定ファイルの作成
4 webpack.mix.jsファイルの更新
5 tailwindの動作確認
6 サイズを減らす

Tailwindとは

tailwindはCSSフレームワークの一つですが、bootstrapやbulmaなどのフレームワークとは異なります。例えばbootstrapではボタンやカードなどのコンポーネントが用意されておりだれでも同じデザインのボタンやカードを作ることができます。すばやくサイトをデザインすることはできますが、カスタムデザインのサイトを作ろうとした場合には簡単ではありません。

その反面、tailwindではカードやボタンのようなコンポーネントはデフォルトでは用意されておらずユーティリティクラスを使って各自がカスタムデザインのボタンを作成することになります。

ユーティリティクラスとは背景が赤であればbg-red, 文字の大きさを太めにしたい場合はfont-boldといった事前にtailwindで準備されているクラスです。それらのユーティリティクラスを直接要素のclassに設定(div class=”bg-red font-bold”のように)を行います。HTMLの要素のclassにユーティリティクラスを設定することになるので独自のクラスを要素に追加し、CSSファイルでそのクラスに対するスタイルを個別に設定する必要がなくなりhtmlファイルだけでデザインを行うことができます。

tailwindのユーティリティクラスを使ったデザインについては下記を参考にしてください。

あわせて読みたい

利用者爆増中初めてでもわかるTailwind CSS入門基礎編

あわせて読みたい

vue.jsとFirebaseでSlackクローン構築(Tailwind CSS編)

tailwindcssのインストール

tailwindcssはnpm installコマンドを使ってインストールを行います。コマンドはLaravelのインストールディレクトリで実行してください。


 $ npm install tailwindcss

tailwindではなく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に設定を追加します。

あわせて読みたい

初めてのLaravel Mix

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

プリプロセッサーにsassを使っている場合は、Mixとの依存関係に解決しない問題があるためにprocessCssUrlsを設定する必要があります。lessの場合は、processCssUrlsは必要ありません。公式マニュアルに記載。

次にresource¥sass¥app.scssファイルを開いて下記の3行で上書きします。


@tailwind base;

@tailwind components;

@tailwind utilities;

Laravelはデフォルトではbootstrapのフレームワークが設定されています。tailwindのフレームワークを利用するのでbootstrapに関する記述は削除しても問題はありません。

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

npm run devコマンドの実行でも構いません。

ブラウザで確認すると画面の中央あたりに緑の文字列が表示されることが確認できます。

サイズを減らす

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