Phoenix LiveView Tailwind CSS Modal

It took me a while to figure out how to style a modal window with Tailwind CSS (had to Google how to center a div), so want to share what I’ve got for anyone who will be searching for LiveView Tailwind CSS Modal styles.

def modal(assigns) do
    assigns = assign_new(assigns, :return_to, fn -> nil end)

    ~H"""
    <div id="modal" class="overflow-y-auto fixed inset-0 z-10 pt-6 phx-modal" phx-remove={hide_modal()}>
      <div class="flex justify-center items-end px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 transition-opacity" aria-hidden="true">
          <div class="absolute inset-0 bg-gray-200 opacity-75"></div>
        </div>

        <div id="modal-content" class="inline-block overflow-hidden px-4 pt-5 pb-4 text-left align-bottom bg-white rounded-lg shadow-xl transition-all transform phx-modal-content sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6" role="dialog" aria-modal="true" aria-labelledby="modal-headline"
            phx-click-away={JS.dispatch("click", to: "#modal-close")}
            phx-window-keydown={JS.dispatch("click", to: "#modal-close")}
            phx-key="escape">
          <div class="relative">
            <%= if @return_to do %>
              <%= live_patch "✖",
                id: "modal-close",
                to: @return_to,
                phx_click: hide_modal(),
                class: "inline-flex absolute right-0 text-gray-400 bg-white rounded-md phx-modal-close hover:text-gray-500 focus:outline-none"
                %>
            <% else %>
             <a id="close" href="#" class="inline-flex absolute right-0 text-gray-400 bg-white rounded-md phx-modal-close hover:text-gray-500 focus:outline-none" phx-click={hide_modal()}>✖</a>
            <% end %>
          </div>
          <%= render_slot(@inner_block) %>
        </div>
      </div>
    </div>
    """
  end

Tested with: phoenix_live_view: 0.17.5, tailwindcss: 3.0.2.

Navigation