Tailwind Javascripts stop working after live redirects between liveviews

[egze]

Flowbite inits the objects when the DOM loads (DOMContentLoaded event). With live navigation, this event doesn’t fire anymore, that’s why on next LiveView it stops working.

What you can do as a quick fix, is listen to LiveView events and dispatch the DOMContentLoaded event yourself, to trick Flowbite.

Put this in your app.js

window.addEventListener('phx:page-loading-stop', (event) => {
  // trigger flowbite events
  window.document.dispatchEvent(new Event("DOMContentLoaded", {
    bubbles: true,
    cancelable: true
  }));
});