LaravelへのTailwind CSSのインストール手順
![LaravelへのTailwind CSSのインストール手順](https://webty.jp/staffblog/wp-content/uploads/2019/08/temp52613-thumb.jpg)
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;
}
}