Modals with the TALL Stack
For such a simple concept, modals can often be tricky to implement. Where exactly do we place them? Where should the event listeners to toggle their display be stored? And how to we make them dynamic? In this series, one piece at a time, we'll discuss everything you need to know about modals within the TALL (Tailwind, Alpine, Laravel, Livewire) stack.
Series episodes
The HTML and CSS for a Basic Modal
10m 34sQuickly build a basic modal with HTML and Tailwind CSS in this friendly Laracasts lesson—perfect for getting started with clean, simple modal design.
Make it a Blade + Alpine Component
7m 16sExtract your modal HTML into a reusable Blade component and easily add Alpine.js support for interactivity in this friendly, step-by-step Laracasts tutorial.
Technique #1: A URI Hash Toggles the Modal
6m 14sLearn how to toggle modals using the URI hash technique for seamless display control before diving into Livewire integration in this friendly Laracasts tutorial.
Use Alpine to Intercept a Form's Submission
5m 25sLearn how to use Alpine.js to intercept form submissions and display a confirmation modal, creating a smooth, interactive user experience in this Laracasts episode.
Technique #2: Manage Modal State With Livewire
8m 29sDiscover how to effortlessly manage and toggle modal state using Livewire’s magic in this friendly, hands-on Laracasts tutorial for dynamic Laravel apps.
Livewire And Alpine Synchronization
13m 19sLearn to sync Livewire and Alpine using @entangle for seamless modal behavior—closing on outside clicks or escape key—in this clear, friendly Laracasts tutorial.
Basic Alpine Transitions
4m 9sQuickly enhance your modal’s design with smooth scale and fade transitions using Alpine.js and Tailwind CSS in this friendly, hands-on Laracasts lesson.
A Full Example
13m 32sBuild a dynamic user management page with Tailwind UI, adding a delete button that triggers a detailed confirmation modal in this engaging Laracasts tutorial.
Toggle Alpine Modals Using Events
8m 25sControl Alpine modals app-wide with an event-based $modals.show('name') API—dispatch on window and handle toggles from a Blade modal.
