Module 5: Alpine.js & Tailwind CSS

Tailwind CSS in Laravel

Laravel ships with Vite and Tailwind configured out of the box.

npm install
npm run dev

The @vite directive loads your assets.

    @vite(['resources/css/app.css', 'resources/js/app.js'])

Alpine.js Basics

Alpine offers the reactive nature of Vue/React at a much lower cost. It's bundled with Livewire 3.

State & Visibility

    Toggle
    
    

        Content...
    

Binding Attributes

    Submit

Livewire + Alpine: @entangle

Share state between Livewire (server) and Alpine (client).

// Livewire Component
public $showModal = false;

    
    

        Modal Content
        Close
    

SPA-like Navigation

Livewire 3 introduces wire:navigate to fetch pages via AJAX and swap the body content, preventing full page reloads.

Dashboard
Profile