Simple Tailwind Modal using Livewire and Alpine

Usage

Include the livewire component on the page where you want the Modal to work, include the component inside your layout if you want it to work on all the pages.

To invoke the Modal on click of a button, you can emit the event to the Modal component as shown below.

        <button wire:click="$emitTo('simple-tailwind-modal','show')" class="btn btn-primary text-white">Open Model</button>

Documentation

This is the demonstration of a simple livewire modal component that uses TailwindCSS for the styling and also uses Alpine.js for the show and hide behavior.

We have used the magic method entangle provided by Livewire to keep the state (show/hide) in sync between Livewire and Alpine.js.