Tailwind Element component disappears after Phoenix LiveView socket connection

Phoenix Forum Questions / Help
, ,
1

Hello all,

I am new to Phoenix and web development (but love both of them).

I am writing a toy application and decided to use https://tailwind-elements.com that provides me with some cool components.

I successfully managed to install the library and use it in my app.
However, I encountered a small issue and I have some difficulties to fix it. Maybe you could give me a hand! :slight_smile:

The issue is the following. I am working within a LiveView, and use the video carousel basic example from Tailwind CSS Video Carousel / Gallery - Free Examples. Once the LiveView’s socket is connected, the carousel disappears. If I remove the line liveSocket.connect(); from my app.js then everything works fine.

Do you have any idea ?

Thank you in advance !

Best

1 Like
2

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">
1 Like
3

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

4

@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?