stabilow
Tailwind Element component disappears after Phoenix LiveView socket connection
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! 
The issue is the following. I am working within a LiveView, and use the video carousel basic example from https://tailwind-elements.com/docs/standard/components/video-carousel. 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
Marked As Solved
benstepp
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">
Last Post!
elvanja
@stabilow how did you manage to install tw-elements?
I did:
npm install tw-elements --savein 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?
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Build Elixir applications with speed and confidence.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #hex
- #security
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking for Elixir devs who love to ship. Start your free account.
Develop your skills with books, videos, and courses.
Producing high quality Elixir screencasts since 2017.
Enabling companies to succeed by building software people love.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"