Creating a modal dialog in Tailwind CSS and Alpine.js

#tailwindcss #alpinejs

Recently I converted an application I'm working on from a Bootstrap 4 theme to Tailwind CSS and Alpine.js. During that process, it was not immediately obvious (to me) on how to open a full screen modal window dialog clicking of a button; and close it again. At the time I didn't get far searching Google, Dev.to or GitHub. After figuring it out, I thought it warranted a short write up. I'm assuming you are all setup with TailwindCSS or AlpineJS; here we go...

Versions: At the time of this article, this was all done using Tailwind CSS 1.2 and Alpine.js 2.2.0

Reminder, it is not TailwindCSS's responsibility to provide a way to create a modal window. Tailwind is the CSS framework. Alpine.js is just commonly referenced in the Tailwind community in creating a modal, dropdowns, as well as other interactions.

Alpine.js didn't give me much to start with in the README.md. For example currently it only shows a dropdown: AlpineJS Use dropdown/modal

I needed these things to get everything work:

Enclosing <div> with x-data="{ open: false }" tag. This <div> will enclose the next few tags.
<button> with the x-show="open" tag. The button can be styled however you want of course.
Dialog <div> with x-show="open" tag. I also styled this <div> for the darker background when the modal was displayed: style="background-color: rgba(0,0,0,.5);". I couldn't get another class or another <div> inside to do this. 🤷
- Maybe you want this?: On your dialog <div> add @click.away="open = false" so when your user clicks off screen it'll go away.
Enclosed in the <div> dialog, you'll need a <button> tag with @click="open = false", to ensure it'll close the modal when clicked.
BONUS: Animations. Some excellent animations to really make the opening and closing of your modal pop.

Copy / paste-able example:

I have all of this inside the main container of the app layout.

    <!-- modal div -->
    <div class="mt-6" x-data="{ open: false }">

      <!-- Button (blue), duh! -->
      <button class="px-4 py-2 text-white bg-blue-500 rounded select-none no-outline focus:shadow-outline" @click="open = true">Open Modal</button>

      <!-- Dialog (full screen) -->
      <div class="absolute top-0 left-0 flex items-center justify-center w-full h-full" style="background-color: rgba(0,0,0,.5);" x-show="open"  >

        <!-- A basic modal dialog with title, body and one button to close -->
        <div class="h-auto p-4 mx-2 text-left bg-white rounded shadow-xl md:max-w-xl md:p-6 lg:p-8 md:mx-0" @click.away="open = false">
          <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
            <h3 class="text-lg font-medium leading-6 text-gray-900">
              Modal Title
            </h3>

            <div class="mt-2">
              <p class="text-sm leading-5 text-gray-500">
                Adipisci quasi doloribus. Veniam veritatis dignissimos. Quis maiores ea. Et nulla sunt.
              </p>
          </div>
        </div>

          <!-- One big close button.  --->
          <div class="mt-5 sm:mt-6">
            <span class="flex w-full rounded-md shadow-sm">
              <button @click="open = false" class="inline-flex justify-center w-full px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-700">
                Close this modal!
              </button>
            </span>
          </div>

        </div>
      </div>
    </div>