Laravel - livewire - sqlite さらに tailwind

(2024-05-17)

Laravel + livewire + sqlite に tailwind を追加します。

tailwind のインストール

cd ~/livewire-example
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

tailwind.config.js の編集

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

resources/css/app.css の編集。

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

サーバーを起動します。

npm run dev

ビルドする時は、

npm run build

ビルドしないと tailwind の変更が保存されません。

ルーティングの変更

これまでは、’/’ でデータ挿入画面を表示していましたが、流石にそれは変なので変更します。

<?php

use App\Livewire\ItemList;
use App\Livewire\ItemCreate;
use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('welcome');
})->name('home');

Route::get('/item-create', ItemCreate::class)->name('item.create');

Route::get('/items-list', ItemList::class)->name('items.list');

livewire コンポーネントの変更

<?php

namespace App\Livewire;

use Livewire\Component;
use App\Models\Item;

class ItemCreate extends Component
{
    public $name;
    public $comment;

    public function render()
    {
        return view('livewire.item-create')->layout('layouts.base');
    }

    public function saveItem()
    {
        $this->validate([
            'name' => 'required',
            'comment' => 'required',
        ]);

        Item::create([
            'name' => $this->name,
            'comment' => $this->comment,
        ]);

        $this->reset('name');
        $this->reset('comment');
    }
}

app/Livewire/ItemList.php を編集。

<?php

namespace App\Livewire;

use Livewire\Component;
use App\Models\Item;

class ItemList extends Component
{
    public $items;

    public function mount()
    {
        // データベースからアイテムを取得し、$itemsプロパティに代入
        $this->items = Item::all();
    }

    public function render()
    {
        // items.blade.phpビューを描画し、$itemsを渡す
        return view('livewire.item-list', ['items' => $this->items])->layout('layouts.base');
    }
}

view の変更

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    @vite('resources/css/app.css')
    <title>Top Page</title>

</head>
<body>
    <h1 class="text-4xl bg-blue-50 border border-stone-400 px-5 py-2 m-3">Menu</h1>

    <ul class="list-disc leading-10 mx-10 px-5">
        <li class="text-blue-800 hover:text-orange-800 delay-150"><a href="{{ route('item.create') }}">投稿する</a></li>
        <li class="text-blue-800 hover:text-orange-800 delay-150"><a href="{{ route('items.list') }}">データリスト</a></li>
    </ul>
</body>
</html>

resources/views/livewire/item-create.blade.php の編集。

<div>
    <h1 class="text-3xl bg-blue-50 border border-stone-400 p-5 py-3 m-3">投稿フォーム</h1>
    <div class="mx-10 leading-10">
        <form wire:submit.prevent="saveItem">
            <span class="inline-block w-24 bg-blue-900 text-white text-center rounded">氏　名</span> :
            <input type="text" wire:model="name" class="border border-gray-400 rounded">
            @error('name') <span>{{ $message }}</span> @enderror<br>
            <div class="mt-3">
                <span class="inline-block w-24 bg-blue-900 text-white text-center rounded">コメント</span> :
                <textarea  wire:model="comment" rows="2" class="align-baseline w-1/2 text-gray-900 border border-gray-400 rounded"></textarea>
                @error('comment') <span>{{ $message }}</span> @enderror<br>
            </div>
            <button type="submit" class="mt-4 bg-blue-500 text-white font-bold py-1 px-4 rounded">投稿する</button>
        </form>
    </div>
</div>

resources/views/livewire/item-list.blade.php の編集。

<div>
    <h1 class="text-3xl bg-blue-50 border border-stone-400 p-5 py-3 m-3">投稿データ一覧</h1>

    <ul class="list-disc leading-10 mx-10 px-5">
        @foreach ($items as $item)
            <li>{{ $item->name }} : {{ $item->comment }}</li>
        @endforeach
    </ul>
</div>

resources/views/layouts/base.blade.php の編集。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    @vite('resources/css/app.css')
    <title>laravel</title>
</head>
<body>
    {{ $slot }}
</body>
</html>

実行

tailwind はビルドしないと変更が保存されません。なので、変更を継続的におこなう場合は tailwind と Laravel の 2 つのサーバーを起動しておく必要があります。

しかし、ビルドしてしまえば、tailwind のサーバーを起動する必要はなく、Laravel のサーバーだけを起動しておけばいいと思います。