Published on

How to Make A Modal With Tailwind CSS?

Tags
ModalsWidget
Modal

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined CSS classes to help you quickly build custom user interfaces. Unlike other CSS frameworks, Tailwind CSS is not opinionated and allows you to customize every aspect of your UI design.

The description of Modal ui component

A modal is a UI component that appears on top of the page content and requires user interaction before it can be dismissed. Modals are commonly used for displaying alerts, notifications, or asking for user input.

Why use Tailwind CSS to create a Modal ui component?

Tailwind CSS provides a set of pre-defined CSS classes that can be used to create modals quickly and easily. Using Tailwind CSS, you can create a modal UI component that is responsive, customizable, and easy to maintain.

The preview of Modal ui component

To create a modal UI component with Tailwind CSS, you can use the following classes:

  • fixed: Sets the position of the modal to fixed.
  • inset-0: Sets the top, right, bottom, and left positions of the modal to 0.
  • flex: Sets the display property of the modal to flex.
  • items-center: Centers the modal vertically and horizontally.
  • justify-center: Centers the modal horizontally.
  • bg-gray-900: Sets the background color of the modal to gray.
  • bg-opacity-50: Sets the opacity of the modal background to 50%.
  • transition-opacity: Adds a transition effect to the opacity property of the modal.

Free download of the Modal's source code

The source code of Modal ui component

To create a modal UI component with Tailwind CSS, you can use the following HTML and CSS code:

<div class="fixed inset-0 flex items-center justify-center">
  <div class="bg-gray-900 bg-opacity-50 transition-opacity">
    <!-- Modal content goes here -->
  </div>
</div>

/* Customize the modal content */
.modal-content {
  /* Add your custom styles here */
}

<button class="bg-blue-600 hover:bg-blue-700 px-3 py-1 rounded text-white m-5 show-modal">show modal</button>

  <div class="modal h-screen w-full fixed left-0 top-0 flex justify-center items-center bg-black bg-opacity-50">
    <!-- modal -->
    <div class="bg-white rounded shadow-lg w-10/12 md:w-1/3">
      <!-- modal header -->
      <div class="border-b px-4 py-2 flex justify-between items-center">
        <h3 class="font-semibold text-lg">Modal Title</h3>
        <button class="text-black close-modal">&cross;</button>
      </div>
      <!-- modal body -->
      <div class="p-3">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum, delectus cumque fugiat nemo ducimus quae deserunt cupiditate sapiente incidunt aut accusantium dolore assumenda vitae similique, exercitationem voluptatum praesentium laboriosam nam.
      </div>
      <div class="flex justify-end items-center w-100 border-t p-3">
        <button class="bg-red-600 hover:bg-red-700 px-3 py-1 rounded text-white mr-1 close-modal">Cancel</button>
        <button class="bg-blue-600 hover:bg-blue-700 px-3 py-1 rounded text-white">Oke</button>
      </div>
    </div>
  </div>
  
  <script>
    const modal = document.querySelector('.modal');

    const showModal = document.querySelector('.show-modal');
    const closeModal = document.querySelectorAll('.close-modal');

    showModal.addEventListener('click', function (){
      modal.classList.remove('hidden')
    });

    closeModal.forEach(close => {
      close.addEventListener('click', function (){
        modal.classList.add('hidden')
      });
    });
  </script>

How to create a Modal with Tailwind CSS?

To create a modal UI component with Tailwind CSS, follow these steps:

  1. Create a new HTML file and add the following code:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Modal with Tailwind CSS</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" />
  </head>
  <body>
    <div class="fixed inset-0 flex items-center justify-center">
      <div class="bg-gray-900 bg-opacity-50 transition-opacity">
        <!-- Modal content goes here -->
      </div>
    </div>
  </body>
</html>
  1. Add your modal content inside the div element with the bg-gray-900 class.
<div class="fixed inset-0 flex items-center justify-center">
  <div class="bg-gray-900 bg-opacity-50 transition-opacity">
    <div class="modal-content p-6 bg-white rounded-lg shadow-md">
      <h2 class="text-lg font-bold mb-4">Modal Title</h2>
      <p class="mb-4">Modal content goes here.</p>
      <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Save</button>
      <button class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">Cancel</button>
    </div>
  </div>
</div>
  1. Customize the modal content by adding your own CSS classes.
.modal-content {
  max-width: 500px;
}
  1. Save the file and open it in your web browser to see the modal in action.

Conclusion

In this article, we have learned how to create a modal UI component with Tailwind CSS. Using Tailwind CSS, we can create a responsive, customizable, and easy-to-maintain modal that can be used for displaying alerts, notifications, or asking for user input. With its utility-first approach, Tailwind CSS makes it easy to create complex UI components without writing custom CSS code.