Creating a modal dialog in Tailwind CSS and Alpine.js
Tags: tailwindcss, alpinejs
Published: 2020-03-17 00:15:10

---
title: Creating a modal dialog in Tailwind CSS and Alpine.js
published: true
description: It wasn't immediately obvious to me on how to create a modal dialog window using TailwindCSS and AlpineJS, so I wrote this quick article.
tags: tailwindcss, alpinejs
---

Recently I converted an application I'm working on from a Bootstrap 4 theme to [Tailwind CSS](https://tailwindcss.com) and [Alpine.js](https://github.com/alpinejs/alpine/).  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](https://github.com/tailwindcss/tailwindcss/releases/tag/v1.2.0) and [Alpine.js 2.2.0](https://github.com/alpinejs/alpine/releases/tag/v2.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](https://github.com/alpinejs/alpinejs) is just commonly referenced in the Tailwind community in creating a modal, dropdowns, as well as other interactions.*

[Alpine.js](https://github.com/alpinejs/alpinejs) didn't give me much to start with in the `README.md`.  For example currently it only shows a dropdown: [AlpineJS Use dropdown/modal](https://github.com/alpinejs/alpine#use)

#### I needed these things to get everything work:

1.  Enclosing `<div>` with `x-data="{ open: false }"` tag.  This `<div>` will enclose the next few tags.
2.  `<button>` with the `x-show="open"` tag.  The button can be styled however you want of course.  
3.  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.  :shrug:
    *  *Maybe you want this?*:  On your dialog `<div>` add `@click.away="open = false"` so when your user clicks off screen it'll go away.  
4.  Enclosed in the `<div>` dialog, you'll need a `<button>` tag with `@click="open = false"`, to ensure it'll close the modal when clicked.
5.  **BONUS**:  [Animations](https://github.com/alpinejs/alpine#x-transition).  Some excellent animations to really make the opening and closing of your modal *pop*.  

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pkfcdpl6157u4zkglb83.png)

#### Copy / paste-able example:
*I have all of this inside the main container of the app layout.*

```html
    <!-- 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>
```