Sail で作った Laravel9 に tailwind.css を導入する

Posted By: K 2023年1月30日

はじめに

Laravel が tailwind.css 推しと聞いて導入しようとした

ところが Laravel9 から assets のビルドツールが laravel-mix から vite に変更されていてネットで検索すると古い情報がヒットして混乱してしまった

ということで導入手順を書き残しておく

環境

  • MacOS (13.1)
  • Docker Desktop (4.12.0)
  • Laravel9

導入手順

Sail で Laravel のプロジェクトを作る

sail で Laravel9 のプロジェクトを作成する

curl -s https://laravel.build/sample-app | bash

コンテナを起動する

cd sample-app
./vendor/bin/sail up -d

ブラウザで http://localhost を開いて Laravel の初期画面を確認する

tailwind.css をインストールする

とりあえず node のパッケージをインストールしておく

./vendor/bin/sail npm install

次に TailWind をインストールして初期化すると tailwind.config.js が生成される

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

tailwind.css を設定する

tailwind.config.js を開いて、content に blade と js を加える

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

resources/css/app.css に以下の 3行を追加する

@tailwind base;
@tailwind components;
@tailwind utilities;

resources/views/welcome.blade.php のヘッダ部に @vite を追加する

<head>
    :
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

assets をビルドする

下記のコマンドで assets をビルドする

./vendor/bin/sail npm run build

public/build/assets に css と js が出力される

前述の @vite が実際に参照するのはこの出力ファイルなので、http://localhost をリロードしてソースを確認すると下記のようになっている

<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 を再ビルドする

./vendor/bin/sail npm run build

http://localhost をリロードしてフォームが正しく表示されていれば OK

おわりに

しばらく tailwind.css を使ってみたけれど、デザインを詳細に設定できる代わりにクラスが長大になりがちで大きなプロジェクトでは管理が面倒くさそう

デザインに特にこだわりがないプロダクトの場合は bootstrap の方が楽だし充分だと思う

参考

Install Tailwind CSS with Vite

https://tailwindcss.com/docs/guides/vite