Tailwind Element component disappears after Phoenix LiveView socket connection

I’m not too sure how the library works, but you should be able to use a phx-hook for this, something like:

# app.js
import {Carousel, initTE} from 'tw-elements'

const Hooks = {}
Hooks.Carousel = {
  mounted() {
    initTE({ Carousel })
  }
}

let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
let liveSocket = new LiveSocket("/live", Socket, {hooks: Hooks, params: {_csrf_token: csrfToken}})

<div
  id="carouselExampleCaptions"
  phx-hook="Carousel"
  class="relative"
  data-te-carousel-init
  data-te-ride="carousel">

Thank you, it works perfectly with the phx-hook.

@stabilow how did you manage to install tw-elements?

I did:

• npm install tw-elements --save in assets folder
• added "./node_modules/tw-elements/dist/js/**/*.js", to tailwind config
• and require("tw-elements/dist/plugin") in plugins

But I keep getting Error: Cannot find module '@tailwindcss/forms' which is strange. Also, when tw-elements stuff is removed, that line does not fail.

Thank you for your time!
P.S. Maybe better open a new thread?