本文書では、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ファイルだけでデザインを行うことができます。

tailwindのユーティリティクラスを使ったデザインについてはまた別の機会で説明を行います。

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に設定を追加します。

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コマンドの実行でも構いません。

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

Hello Tailwind
Hello Tailwindがブラウザに表示