I think the answer here is that you can apply multiple classes in the 3-tuple separated by spaces. I guessed at this by looking at the linked source code, and then saw that it uses a function transition_class_names which calls class_names which uses String.split(" "") (source)

For example something specified as:

  Entering: "transition ease-out duration-100"
    From: "transform opacity-0 scale-95"
    To: "transform opacity-100 scale-100"
  Leaving: "transition ease-in duration-75"
    From: "transform opacity-100 scale-100"
    To: "transform opacity-0 scale-95"

can be implemented as:

  def show_user_menu(js \\ %JS{}) do
    js
    |> JS.toggle(
      to: "#user_menu",
      in:
        {"transition ease-out duration-100", "transform opacity-0 scale-95",
         "transform opacity-100 scale-100"},
      out:
        {"transition ease-in duration-75", "transform opacity-100 scale-100",
         "transform opacity-0 scale-95"}
    )
  end

Or the docs

@tcoopman Thanks for chiming in!

I was mostly having trouble with entrance transitions. (Elements not previously shown.) I had to add these to get Tailwind transitions to apply correctly:

1. style="display: none"
2. class="start-classes"
3. phx-mounted={JS.show(transition: {"transition-classes", "start-classes", "end-classes"}, time: ...)}

So for example, if a TailwindUI component has:

<!--
  Entering: "ease-out duration-300"
    From: "opacity-0"
    To: "opacity-100"
-->
<div>
  ...
</div>

I had to do:

<div
  style="display: none"
  class="opacity-0"
  phx-mounted={JS.show(
    transition: {"ease-out duration-300", "opacity-0", "opacity-100"},
    time: 300
  )}
>
  ...
</div>

Without this precise configuration, I wasn’t able to get the transition to display correctly. (Notice I’m using JS.show instead of JS.transition.)

Hopefully someone out there finds this helpful!

It’s worth noting that Alpine.js makes this much less confusing to get right. You just take the 3 lists of classes from the TailwindUI example HTML and drop them into 3 corresponding attributes.

<div
  x-show="open"
  x-transition:enter="ease-out duration-300"
  x-transition:enter-start="opacity-0"
  x-transition:enter-end="opacity-100"
>
  ...
</div>

Perhaps LiveView could benefit to evolve more in that direction.