目次
はじめに
Laravel が tailwind.css 推しと聞いて導入しようとした
ところが Laravel9 から assets のビルドツールが laravel-mix から vite に変更されていてネットで検索すると古い情報がヒットして混乱してしまった
ということで導入手順を書き残しておく
環境
- MacOS (13.1)
- Docker Desktop (4.12.0)
- Laravel9
導入手順
Sail で Laravel のプロジェクトを作る
sail で Laravel9 のプロジェクトを作成する
|
1 |
curl -s https://laravel.build/sample-app | bash |
コンテナを起動する
|
1 2 |
cd sample-app ./vendor/bin/sail up -d |
ブラウザで http://localhost を開いて Laravel の初期画面を確認する
tailwind.css をインストールする
とりあえず node のパッケージをインストールしておく
|
1 |
./vendor/bin/sail npm install |
次に TailWind をインストールして初期化すると tailwind.config.js が生成される
|
1 2 |
npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p |
tailwind.css を設定する
tailwind.config.js を開いて、content に blade と js を加える
|
1 2 3 4 5 6 7 8 9 10 11 |
/** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./resources/**/*.blade.php", "./resources/**/*.js", ], theme: { extend: {}, }, plugins: [], } |
resources/css/app.css に以下の 3行を追加する
|
1 2 3 |
@tailwind base; @tailwind components; @tailwind utilities; |
resources/views/welcome.blade.php のヘッダ部に @vite を追加する
|
1 2 3 4 |
<head> : @vite(['resources/css/app.css', 'resources/js/app.js']) </head> |
assets をビルドする
下記のコマンドで assets をビルドする
|
1 |
./vendor/bin/sail npm run build |
public/build/assets に css と js が出力される
前述の @vite が実際に参照するのはこの出力ファイルなので、http://localhost をリロードしてソースを確認すると下記のようになっている
|
1 2 3 4 5 |
<html> : <link rel="stylesheet" href="http://localhost/build/assets/app-179954eb.css" /> <script type="module" src="http://localhost/build/assets/app-02dc9c4b.js"></script> </head> |
tailwind.css を試す
まず https://tailwindui.com/components/application-ui/forms/sign-in-forms からコードをコピーして resources/views/welcome.blade.php のボディ部にペーストする
次に assets を再ビルドする
|
1 |
./vendor/bin/sail npm run build |
http://localhost をリロードしてフォームが正しく表示されていれば OK
おわりに
しばらく tailwind.css を使ってみたけれど、デザインを詳細に設定できる代わりにクラスが長大になりがちで大きなプロジェクトでは管理が面倒くさそう
デザインに特にこだわりがないプロダクトの場合は bootstrap の方が楽だし充分だと思う
参考
Install Tailwind CSS with Vite