<!
doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-
ratio,line-clamp"></script>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body>
<div class="prose">
<!-- ... -->
</div>
</body>
</html>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></
script>
<script defer
src="https://unpkg.com/alpinejs@3.10.3/dist/cdn.min.js"></script>
npm install alpinejs
import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start()
<script src="{{ asset('js/app.js') }}" defer></script>
<div
x-data="{
search: '',
items: ['foo', 'bar', 'baz'],
get filteredItems() {
return this.items.filter(
i => i.startsWith(this.search)
)
}
}"
>
<input x-model="search" placeholder="Search...">
<ul>
<template x-for="item in filteredItems" :key="item">
<li x-text="item"></li>
</template>
</ul>
</div>
x-data="{ megaMenuOpen: false }" @mouseenter="megaMenuOpen = true"
@mouseleave="megaMenuOpen = false"
x-bind:class="{ 'rotate-90': megaMenuOpen }"
<button @mouseenter="hovering = true" @mouseleave="hovering = false" x-
bind:class="{ 'bg-blue-500': hovering, 'bg-gray-300': !hovering }">Hover
me</button>
Transition
-----------
x-transition: enter --- enter-start enter-end
x-transition:leave --- leave-start leave-end
x-transition:enter="transition-transform origin-top ease-out duration-300"
x-transition:enter-start="scale-0"
x-transition:enter-end="scale-100"
x-transition:leave="transition-transform origin-top ease-in duration-300"
x-transition:leave-start="scale-100"
x-transition:leave-end="scale-0"
x-show="megaMenuOpen"
x-transition:enter="transition-transform origin-top ease-out duration-
300"
x-transition:enter-start="scale-0"
x-transition:enter-end="scale-100"
x-transition:leave="transition-transform origin-top ease-in duration-300"
x-transition:leave-start="scale-100"
x-transition:leave-end="scale-0"
class="absolute left-0 mt-2 bg-white p-4 shadow-lg w-96"
x-show="megaMenuOpen"
x-transition:enter="transition-opacity ease-out duration-300"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition-opacity ease-in duration-300"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
class="grid grid-cols-4 gap-4"
x-show="megaMenuOpen"
x-transition:enter="transition-transform ease-out duration-300"
x-transition:enter-start="translate-y-8"
x-transition:enter-end="translate-y-0"
x-transition:leave="transition-transform ease-in duration-300"
x-transition:leave-start="translate-y-0"
x-transition:leave-end="translate-y-8"
