PLATFORM

  • Tails

    Create websites with TailwindCSS

  • Blocks

    Design blocks for your website

  • Wave

    Start building the next great SAAS

  • Pines

    Alpine & Tailwind UI Library

  • Auth

    Plug'n Play Authentication for Laravel

  • Designer comingsoon

    Create website designs with AI

  • DevBlog comingsoon

    Blog platform for developers

  • Static

    Build a simple static website

  • SaaS Adventure

    21-day program to build a SAAS

COMMUNITY
MORE
Question By

Randy Bryant

Solved
Back to All Questions

Laravel tailwind livewire alpine question

Solved
randy-bryant ・

Feb 2nd, 2021 09:52 PM

I'm working on a dark mode, light mode theme livewire mode changer with user preference stored in the user table in a string called mode.

Everything worked using main class="{{ auth()->user()->mode }}" until I moved the main tag into the layouts.app - So how do I change main class="light" to main class="dark" when it is outside of the livewire component using alpinejs without a page refresh?

Report
DigitalOcean Laravel News Genesis
bobbyiliev ・

Feb 13th, 2021 12:06 AM

・

Best Answer

Hi there,

I think that this should be doable with a Livewire Event and a JavaScript listener. So that you could trigger an event from your Livewire componenet and have a JS listener to change the class:

https://laravel-livewire.com/docs/2.x/events

Hope that this helps! Regards, Bobby

Report