Tailwind modal: How to create Tailwind CSS Modal
Tags: tailwindcss, frontend, tooling, tutorial
Published: 2022-09-09 18:06:14

---
title: Tailwind modal: How to create Tailwind CSS Modal
published: true
date: 2021-01-10 01:16:04 UTC
tags: ["tailwindcss", "frontend", "tooling", "tutorial"]
canonical_url: https://www.devwares.com/blog//how-to-create-tailwind-css-modal/
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d1nwuib2lkpivzdn1pff.png
---

When building web applications, one of the most important thing a developer must have in mind is user experience. One of the ways a developer can do this is to pay attention to how user interact with his/her applications.

## Table of content

- Introduction
- What is a modal dialog
- Prerequisites
- Add Tailwind CSS to your Project
- Create the button
- Adding an overlay effect
- Create the modal dialog
- Adding functionality
- Conclusion

## Introduction

Tailwind CSS is a self described utility-first CSS framework. It is used for building beautiful user interfaces. It is non-opinionated therefore easy to style.

If you do not have Tailwind CSS already installed in your HTML project, check out our article [here](https://www.devwares.com/blog/how-to-use-tailwind-css-in-HTML) to figure out how to install the Tailwind CSS and use it in your HTML project.

In this article, we are going to build a Tailwind CSS Modal popup.

## Tailwind modal: What is a modal dialog

A modal is simply a pop up window that appears on top of a main content of a web application. Modal dialog always seeks for user interaction. there can also be used to give critical warning to users to prevent errors.

Throughout the Tailwind CSS tutorial we are going to use Tailwind CSS, HTML and JavaScript to build our modal dialog. The Tailwind CSS modal popup window will look like the image below

## Prerequisite

- Latest version of Tailwind CSS
- Knowledge of HTML
- Knowledge of CSS
- Knowledge of JavaScript

## Add Tailwind CSS to your Project

Before we can go on, it is assumed you have Tailwind CSS installed on your system. If you haven’t, you can check out how to do this on our previous tailwind CSS tutorial.

## Creating a button

The first step after installation of the tailwind CSS is to link the html to the tailwind CSS like the code below.

**Code:**

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>modal dialog</title>
    <link rel="stylesheet" href="style.css" />
  </head>
</html>

```

## Creating a button

Once your Tailwind CSS stylesheet is correctly linked. We can go ahead to create a simple button first. To do this, we wrapped our button under a “div” container and added instruction on our page to click on the button. You can see the code below

**Code:**

```
<div class="w-80 mx-auto mt-5 p-7">
  <p class="text-2xl font-medium text-gray-800">
    click here to open the modal
  </p>
  <button
    class="bg-purple-500 text-white rounded-md px-8 py-2 text-base font-medium hover:bg-blue-600 
    focus:outline-none focus:ring-2 focus:ring-green-300"
    id="open-btn"
  >
    Open Modal
  </button>
</div>

```

In the code above, we created the button and styled it with Tailwind CSS styles. Our Tailwind popup will look like the image below at this point.

![Tailwind CSS Modal](https://www.devwares.com/blog/images/create-tailwind-css-modal2.png)

## Overlap effect

We can go ahead to create an overlap effect. Overlap effect makes sure the user attends to the Tailwind modal dialog box first before continuing with the site.

**Code:**

```
<div
  class="fixed hidden insert-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full"
  id="modal"
></div>

```

In the code above, we used some Tailwind CSS style to render an overlap effect on our page.

## Creating the Tailwind CSS modal dialog

We initially stated at the beginning of our tutorial how important the Tailwind modal dialog is and what it does for the user. In our case we created a Tailwind css modal dialog that tells the user whether he /she has successfully created an account.

**Code:**

```

<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
            <div class="mt-3 text-center">
                <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-purple-100">
                    <svg class="h-6 w-6 text-purple-600" fill="none" stroke="currentColor" 
viewBox="0 0 24 24"
xmlnx="http://www.w.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
d="M5 13l4 4L19 7">
</path></svg>
                </div>
                <h3 class="text-lg leading-6 font-medium text-gray-900">Successfull</h3>
                <div class="mt-2 px-7 py-3">
                    <p class="text-sm text-gray-500">Account has been Successfull registered.</p>
                </div>
                <div class="items-center px-4 py-3">
                    <button id="ok-btn"
                        class="px-4 py-2 bg-purple-500 text-white 
                            text-base font-medium rounded-md w-full 
                            shadow-sm hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-300">
                        OK
                    </button>
                </div>
            </div>
        </div>
</div>

```

In the code above, we first started by styling the head of our Tailwind modal dialog. We did this by adding classes that will enable us align our elements inside the parent “div”. we went ahead to create child “div” which contained an “svg” element. Some classes we added to our modal dialog include

- `text-center` which center all the text present
- [`font-medium`](https://www.devwares.com/tailwindcss/classes/tailwind-font-weight/) which changes the font weight to 500
- `px-4` and `py-3` which adds padding of 16px to the y-axis and 8px to the y-axis
- `focus:ring-2` which creates an outline ring on the button
- `focus: ring-purple-300` which creates a purple outline ring
- `hover: bg-purple-600` simply adds a hover effect on the button by changing the background color.

We have successfully styled our Tailwind CSS modal dialog. We can now go ahead and add some functionality to our Tailwind CSS modal

## Tailwind Modal: Functionality of the Tailwind CSS Modal dialog

We initially added some IDs to the buttons when we were creating the style for the modal dialog and the instruction button. We are going to go ahead and add functionality to this buttons by first grabbling all our IDs. You can write the code inside the script tag at the bottom of our page.

**Code:**

```
<script>
  let modal = document.getElementById('modal');
  let btn = document.getElementById('open-btn');
  let button = document.getElementById('ok-btn');
</script>

```

In the code above, we used the “document.getElementById” to grab the IDs we have given to the buttons on our page. We can now make the buttons do what we want. First we want our “open modal” button to open the modal dialog when clicked and our “OK “ button on the Tailwind CSS modal dialog to close when clicked.g To do this we have to create a function for the both button to do this. The functions are written below

**Code:**

```
btn.onclick = function() {
  modal.style.display = 'block';
};

button.onclick = function() {
  modal.style.display = 'none';
};

```

Moreover, we need the button to close too when the user clicks anywhere on the window. So we are going to create a function that will do this for us.

**Code:**

```

window.onclick = function (event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    </script>

```

With the code above, our Tailwind CSS modal popup is ready. It should look like the image below.

![Tailwind CSS Modal](https://www.devwares.com/blog/images/create-tailwind-css-modal3.png)

## Conclusion

In our tailwind CSS tutorial today, we went through how to use tailwind CSS to create modal dialog. In the tutorial we walked through the process of creating the modal dialog from its styling to creating their functionality. These are one of many ways you can practice your skills with Tailwind CSS. I hope you enjoyed the tutorial.


## Resources


- [How to use tailwind CSS in HTML]  (https://www.devwares.com/blog/how-to-use-tailwind-css-in-HTML)

- [Why tailwind CSS is good](https://www.devwares.com/blog/why-tailwind-css-is-good)

- [How to use Tailwind CSS in Nextjs](https://www.devwares.com/blog/tailwind-css-in-nextjs)

- [How to create Tailwind CSS Components for your Website](https://www.devwares.com/blog/how-to-create-tailwind-css-components-for-your-website)

- [How to create Tailwind CSS Animation](https://www.devwares.com/blog/create-animation-with-tailwind-css/)

- [Tailwind grid-How to use tailwind CSS grid templates in your project](https://www.devwares.com/blog/how-to-add-tailwind-css-grid-to-your-project/)

- [How to create a Beautiful Responsive Navigation bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/)

- [Tailwind form-How to create and style a Responsive Form using Tailwind CSS](https://www.devwares.com/blog/how-to-create-and-style-a-responsive-form-using-tailwindcss/)

- [Tailwind CSS Flex: How to use Tailwind CSS Flex](https://www.devwares.com/blog/how-to-use-tailwind-css-flex/)

- [How to use tailwind CSS padding, margin and border in your project](https://www.devwares.com/blog/how-to-use-tailwind-css-padding-margin-and-border-in-your-project/)

- [Tailwind CSS CDN-How to use the Tailwind CSS JIT CDN](https://www.devwares.com/blog/how-to-use-the-tailwind-css-JIT-CDN/)

- [How to set up your first Tailwind CSS Project](https://www.devwares.com/blog/setting-up-your-first-project-using-tailwind-css/)

- [How to use Tailwind CSS in HTML](https://www.devwares.com/blog/how-to-use-tailwind-css-in-HTML/)

- [Tailwind CSS table-How to Create Tailwind CSS tables](https://www.devwares.com/blog/how-to-create-tailwind-css-tables/)

- [How to set up your first Tailwind CSS Project](https://www.devwares.com/blog/setting-up-your-first-project-using-tailwind-css/)

- [Why is tailwind CSS better than other CSS framework](https://www.devwares.com/blog/why-tailwind-css-is-good/)

- [10 tailwind CSS templates and themes](https://www.devwares.com/blog/tailwind-css-10-templates-and-themes/)

- [How to add tailwind CSS colors and Fonts to your project](https://www.devwares.com/blog/how-to-add-tailwind-css-colors-and-fonts-to-your-project/)

- [Differences between Tailwind CSS and SASS](https://www.devwares.com/blog/differences-between-tailwind-css-and-sass/)

- [Differences Between Tailwind CSS and Bootstrap](https://www.devwares.com/blog/diffrences-between-tailwind-css-and-bootstrap/)

- [10 Awesome projects built with Tailwind CSS](https://www.devwares.com/blog/awesome-10-projects-built-with-tailwind/).

- [How to install Tailwind CSS in Vue.js](https://www.devwares.com/blog/how-to-install-tailwind-css-in-vuejs/).

- [How to use Tailwind CSS in React](https://www.devwares.com/blog/how-to-use-tailwind-css-in-react/)

- [How to install Tailwind CSS with Laravel](https://www.devwares.com/blog/how-to-install-tailwind-css-in-laravel/)

- [How to create react date picker](https://www.devwares.com/blog/create-datepicker-with-contrast/)

- [React bootstrap 5 form-How to create React forms](https://www.devwares.com/blog/how-to-create-and-style-a-responsive-form-using-tailwindcss/).

- [How to create a beautiful React multiselect](https://www.devwares.com/blog/create-multiselect-with-contrast/).

- [How to create a beautiful React Bootstrap progress bar](https://www.devwares.com/blog/create-progress-with-contrast/).

- [How to create a beautiful React Bootstrap select with icons](https://www.devwares.com/blog/create-select-with-contrast/).

- [How to create a beautiful Bootstrap 5 stepper](https://www.devwares.com/blog/create-stepper-with-contrast/)

- [How to create a beautiful React Bootstrap table]
(https://www.devwares.com/blog/create-tables-with-contrast/)

- [How to create beautiful React Bootstrap tabs](https://www.devwares.com/blog/create-tabs-with-contrast/)

- [How to create a Beautiful Responsive Navigation bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/)

- [Tailwind Modal-How to create a React Modal using Tailwind CSS.](https://www.devwares.com/blog/how-to-create-a-react-modal-using-tailwind-css/)

- [How to create a Bootstrap 5 Modal.](https://www.devwares.com/blog/how-to-create-a-bootstrap5-modal/)

- [How to create a beautiful Bootstrap Data table with Icons](https://www.devwares.com/blog/create-datatable-with-contrast/)

- [How to create a React date picker.](https://www.devwares.com/blog/create-datepicker-with-contrast/)

- [React bootstrap 5 form-How to create React forms](https://www.devwares.com/blog/create-forms-with-contrast/)

- [How to create a Angular Bootstrap Sidebar](https://www.devwares.com/blog/how-to-create-an-angular-bootstrap-sidebar/)

- [How to use Bootstrap in React Using a React Library](https://www.devwares.com/blog/using-bootstrap-in-react/)

- [How to Create React Tabs with Tailwind CSS](https://www.devwares.com/blog/how-to-create-react-tabs-with-tailwind-css/)

- [How to implement dark mode in React using tailwind css](https://www.devwares.com/blog/how-to-implement-dark-mode-in-tailwind-css/)

- [How to Implement a React Step Progress Bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-implement-a-react-step-progress-bar-using-tailwind-css/)