LaravelへのTailwind CSSのインストール手順

WEB制作
LaravelへのTailwind CSSのインストール手順

LaravelにLaravel Mixを使ってTailwind CSSをインストールする方法を紹介します。

目次

Tailwind CSSとは

Tailwind CSSは、ユーティリティファーストのCSSフレムワークです。Tailwind CSSは、ほぼ全てのCSSプロパティをユーティリティクラスとして用意されてまり、これらを組み込み合わせることでデザインを構築して行きます。

例えば、ボタンを実装するのであれば、このようになります。

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Button
</button>

感覚としては、インラインでCSSを書いている時に近いと思います。

コンポーネント

コンポーネントクラスは、全て自分で作成しなければ行けません。tailwindcomponentsでは、多くのサンプルコードが公開されています。

ライブラリバージョン

今回使用するライブラリのバージョンです。

  • Laravel 5.8
  • Tailwind CSS v1.0.5

インストール手順

1. Tailwind CSSのインストール

npmをインストールし、以下のコマンドを実行することで、tailwindcssをインストールすることができます。

$ npm install tailwindcss --save-dev

2. 設定ファイルを生成

以下のコマンドを実行して、tailwind.config.jsを生成します。

$ ./node_modules/.bin/tailwind init

3. Tailwind CSSの読み込み設定

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

@tailwind base;

@tailwind components;

@tailwind utilities;

4. Laravel Mixのビルド設定

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

5. アセットファイルのビルド

npm run devコマンドを実行し、アセットファイルをコンパイルします。

$ npm run dev

watchコマンドでアセットの変更の監視して、変更があった場合に自動でコンパイルするようにすることもできます。

$ npm run watch

6. Viewへの組み込み

Viewファイル（Blade）に以下のような記述をすることでTailwind CSSが読み込まれます。

<link rel="stylesheet" href="{{ asset('css/app.css') }}">

終わりに

以上でLaravelでTailwind CSSが使えるようになりました。自作のコンポーネントを追加する場合は、@tailwind components;と@tailwind utilities;の間に追加してください。

.btn {
    @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;

    &:hover {
        @apply bg-blue-700;
    }
}