Laravel 2022/03/10 (更新日:2023/01/10)

Laravel TailwindCSS × Alpine.js を最低限覚えてビューを作成

Laravel Breeze などの Laravel の公式で紹介されてあるパッケージでは TailwindCSS と Alpine.js を使用してビューを作成しています。仕組みを理解するために、TailwindCSS Alpine.js の最低限をメモします。

親記事

Dockerで環境構築して Laravel 9で CRUD 機能を作る

2022年03月15日

Laravel

TailwindCSS

CSSフレームワークで、HTMLを離れることなく、最新のWebサイトを迅速に構築できることが特徴。
HTMLのclass属性に直接プロパティを指定していく感覚です。

<button type="button" class="text-gray-500 group bg-white rounded-md inline-flex items-center text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" aria-expanded="false">

TailwindCSSチートシート TailwindCSSのクラス一覧リスト

TailwindCSSコンポーネント TailwindCSSを使ったレイアウトの例

Alpine.js

軽量なJavaScriptのフレームワークです。

ボタンをクリックすると、テキストの色を変える例

<div class="flex justify-around items-center w-full" x-data="{ toggle : false}">
     <button x-on:click=" toggle = !toggle " class="font-display p-2 m-5 bg-blue-300 rounded">button</button>
     <h1 x-bind:class="! toggle ? 'text-red-300' : 'text-blue-300'">text</h1>
</div>

1: x-data データを定義、データは子要素で使用することができます。
2: x-on:イベント名クリックしたらtoggleの値を変更しています。
3: x-bind:属性名 toggleの値によってclassを変更しています。

x-on, x-bind は省略して書くことができます。

上の例の省略版

<div class="flex justify-around items-center w-full" x-data="{ toggle : false}">
     <button @click=" toggle = !toggle " class="font-display p-2 m-5 bg-blue-300 rounded">button</button>
     <h1 :class="! toggle ? 'text-red-300' : 'text-blue-300'">text</h1>
</div>

イベント

イベント名には、ネイティブJavaScriptイベントが使用できます。

カスタムイベント

@イベント名.カスタム名で指定します。指定できるカスタムイベント

@click.once → 1回だけ
@click.outside → 要素の外側をクリック

キーイベント

@keydown.enter → エンターを押したとき
@keydown.escape → escが押されたとき
など

ボタンをクリックでボタンのテキストが変更し、テキストが表示、非表示する例

<div class="flex justify-around items-center w-full" x-data="{ toggle : false}">
     <button @click=" toggle = !toggle " x-text="toggle ? 'hide' : 'show'" class="font-display p-2 m-5 bg-blue-300 rounded"></button>
     <h1 x-show="toggle" class="font-display">text</h1>
</div>

2: x-text 要素のテキストを変更できます。
3: x-show 要素を表示および非表示にします。

トランジション

表示してから、非表示前にアニメーションさせる例

<div class="flex items-center w-full" x-data="{toggle: false}">
     <button @click="toggle = ! toggle" class="py-2 px-3 mx-10 rounded-sm bg-blue-300">Toggle</button>
     <div x-show="toggle"
     x-transition:enter="transition ease-out duration-300"
     x-transition:enter-start="opacity-0 scale-90"
     x-transition:enter-end="opacity-100 scale-100"
     x-transition:leave="transition ease-in duration-300"
     x-transition:leave-start="opacity-100 scale-100"
     x-transition:leave-end="opacity-0 scale-90"
     >Hello 👋</div>
</div>