Challenges with Phoenix LiveView.JS and TailwindCSS transitions

I’m working with LiveView.JS for the first time. It’s one of the features that’s brought me back to LiveView on the frontend, and I feel like it was a critical piece that was missing for the community in earlier versions of the websocket-based paradigm.

By default, Phoenix comes installed with TailwindCSS. In Tailwind, transitions often occur via CSS classes. Take the following example:

<!-- When a menu is 'opened', it should receive the "block" class. When 'closed', it should receive the "hidden" class -->
<div id="mobile-menu" class="block sm:hidden">...</div>
<div id="desktop-menu" class="hidden sm:block">...</div>

This is a very common occurrence in Tailwind - transitions are almost exclusively driven via class addition and subtraction. When I went to try and apply this pattern with LiveView.JS, I was surprised to not see an obvious way to approach this.

The challenge with JS.toggle() is that the display property is directly applied via the style=display: attribute, where tailwind classes are invalid. This causes problems in the reactive example above, because the mobile menu could be toggled to be in the open state (style= display:block), and if the window is resized, this style will override the existing reactive behavior defined in tailwind (sm:hidden), causing both menus to be shown at once!

Of course, you could avoid this by using the JS.addClass and JS.removeClass functions, but that requires you to know the current state of the element to determine which function to call… meaning we’d need to keep state on the server, exactly what we are trying to avoid for something like a menu’s visibility!

I looked over the other functions available in LiveView.JS, but none seem to handle what I imagine must be an incredibly common use-case.

So, please help me out LiveView devs - am I missing something obvious? All I want is the ability to toggle two sets of arbitrary tailwind classes and let the state be contained entirely on the client via JavaScript. If I can do that, Tailwind will take care of everything else.

Thanks for your suggestions!


Your example seems to be empty - was it a copy/paste that didn’t get into the post?

Also, have you seen JS.transition? It supports tailwind classes Phoenix.LiveView.JS — Phoenix LiveView v0.19.4


The post originally tried to use single backquotes on separate lines to quote a whole block of code, which resulted in the code not getting quoted. I’ve replaced them with triple-backquotes ``` which work as the author intended.


LiveBeats uses tailwind and toggles menu and such just fine from TailwindUI. Have you looked there?:

check the <.dropdown> in core components and the show_dropdown and hide_dropdown functions:


Thanks, it was in the mod queue so I didn’t get a chance to review for formatting beforehand :slight_smile:

1 Like

Hey Chris, thanks a bunch for the reply (and for your work)!

I took a brief look, it seems to me like your approach to this problem is as follows:

  1. Create a button that shows the mobile menu (sidebar) on click.
      class="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-purple-500 lg:hidden"
      <span class="sr-only">Open sidebar</span>
        class="h-6 w-6"
        viewBox="0 0 24 24"
          d="M4 6h16M4 12h8m-8 6h16"
  1. Inside the mobile menu, have a nested component that is capable of hiding the mobile sidebar:
  class="fixed inset-0 flex z-40 lg:hidden"
  style="display: none;"
  <div class="fixed inset-0 bg-gray-600 bg-opacity-75" phx-click={hide_mobile_sidebar()}></div>

    class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-white hidden min-h-screen"
  1. Implement the “show” method called by the button in #1 to hide itself.
def show_mobile_sidebar(js \\ %JS{}) do
    |> "#mobile-sidebar-container", transition: "fade-in")
      to: "#mobile-sidebar",
      display: "flex",
      time: 300,
        {"transition ease-in-out duration-300 transform", "-translate-x-full", "translate-x-0"}
    |> JS.hide(to: "#show-mobile-sidebar", transition: "fade-out")
    |> JS.dispatch("js:exec", to: "#hide-mobile-sidebar", detail: %{call: "focus", args: []})

This is clever and seems like a viable approach, but where I think it gets a bit ugly is when you have the desire for a single button to control both the “show” and “hide” behavior of a component. In that case, you’d need to end up having two buttons with most things duplicated, and two methods - something like this:

<button id="show-menu-button" class="block <%= @duplicated_classes %>" phx-click={show_menu("#menu")}>Show Menu</button>
<button id="hide-menu-button" class="hidden <%= @duplicated_classes %>" phx-click={hide_menu("#menu")}>Hide Menu</button>

def show_menu(menu) do
  show_button("#hide-menu-button") menu)
  # transitions omitted for brevity

def hide_menu(menu) do
  # transitions omitted

But I do feel that a more smooth developer experience would be something like this:

<button phx-click={toggle_menu("#menu")}>Menu</button>

def toggle_menu(to) do
  JS.toggleClasses(to: to, in: "block", out: "hidden")
  JS.toggleClasses(to: "#menu-button--icon", in: "block", out: hidden")

I’m very open to being wrong about this, because what I’m suggesting is that LiveView.JS should manage the state of the classes for a component. But that said, JS.toggle is already managing this state to determine if it should apply display: none or display: block, so I imagine the implementation would be similar.

What I’m trying to get at is this - as it stands, it looks like JS.toggle is quite limited in use - it requires you to be okay with your component having its display overridden with display: block | flex | inline. In most cases with Tailwind, you really want a specific tailwind class to be applied, and you definitely don’t want your reactive modifiers (sm:, md:, etc) to be overridden.

Very curious as to your thoughts! Thanks again.

1 Like

that’s what my linked dropdown component does:
2023-07-13 14-04-52.2023-07-13 14_05_10

The phx-click-away does the hide which you’ll need for a menu anyway, and the same button acts as show and hide because of that.

1 Like

Also sounds like this is what you’re interested in: feat: toggle_classes (updated 2021/01/08) by nbw · Pull Request #1721 · phoenixframework/phoenix_live_view · GitHub


Note sure if you meant the PR on itself or the workaround proposed in the comments. If the latter, that works for classes, but fails if what you are trying to toggle is something else (like attributes for example).

For attributes, try swapping JS.add_class and JS.remove_class into @Nik’s workaround re-posted below.

def toggle_expanded(js \\ %JS{}) do
  |> JS.remove_class(
    to: "#outer-menu.expanded"
  |> JS.add_class(
    to: "#outer-menu:not(.expanded)"
1 Like

I tried that, couldn’t make it work, did it work for you? If so I will try to revisit it and see if it was something that I messed up

I got it working when using a class based selector as the condition, but not when using an attribute selector as the condition.

<.button phx-click={accessible_js_toggle(to: ".target")}>

# these two functions successfully add and remove the `aria-hidden="true"` attribute and `"invisible"` class to the targeted elements
  def accessible_js_toggle_1(js \\ %JS{}, [to: selector]) do
    |> JS.remove_attribute("aria-hidden", to: selector <> "[style*='display: none']")
    |> JS.set_attribute({"aria-hidden", "true"}, to: selector <> ":not([style*='display: none'])")
    |> JS.remove_class("invisible", to: selector <> "[style*='display: none']")
    |> JS.add_class("invisible", to: selector <> ":not([style*='display: none'])")
    |> JS.toggle(to: selector)

  def accessible_js_toggle_2(js \\ %JS{}, [to: selector]) do
    |> JS.remove_attribute("aria-hidden", to: selector <> ".invisible")
    |> JS.set_attribute({"aria-hidden", "true"}, to: selector <> ":not(.invisible)")
    |> JS.remove_class("invisible", to: selector <> ".invisible")
    |> JS.add_class("invisible", to: selector <> ":not(.invisible)")
    |> JS.toggle(to: selector)

  # whereas this function that selects by attribute does not work while toggling
  # if set is after remove, then it only gets set; if remove is after set, then it never gets set
  def accessible_js_toggle_3(js \\ %JS{}, [to: selector]) do
    |> JS.remove_attribute("aria-hidden", to: selector <> "[aria-hidden='true']")
    |> JS.set_attribute({"aria-hidden", "true"}, to: selector <> ":not([aria-hidden='true'])")
    |> JS.toggle(to: selector)

Ahh sorry for any confusion, meant to write swapping in JS.set_attribute and JS.remove_attribute!

I would recommend using phoenix_live_react together with headles-ui for rendering interactive components, as handling css transitions in liveview still has much to be desired for anything more complex.

Even then, handling DOM removal transitions of the react node is still quite annoying and would require using LiveView.JS to target the node you’re removing.