Published on

Build A Modal With Tailwind CSS Like A Pro With The Help Of These 6 Tips

Tags
AlpinejsModals
Modal

As a FrontEnd technology blogger, you must have heard about Tailwind CSS. It is a utility-first CSS framework that helps developers to create beautiful and responsive UI components with ease. In this article, we will learn how to build a Modal UI component with Tailwind CSS like a pro.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined CSS classes to create UI components. It is designed to be highly customizable and easy to use. With Tailwind CSS, you can create beautiful and responsive UI components without writing custom CSS code.

The description of Modal UI component

A Modal UI component is a popup window that appears on top of the current page. It is used to display additional information or to ask for user input. Modals are widely used in web applications to provide a better user experience.

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 a Modal UI component quickly. It also provides responsive design classes that make it easy to create a Modal that looks good on all screen sizes.

The preview of Modal UI component

To create a Modal UI component with Tailwind CSS, we will use a combination of CSS classes to style the Modal. The Modal will have a header, body, and footer section. The header section will contain a title, and the footer section will contain buttons. The body section will contain the content 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, we will use a combination of HTML and CSS code. The HTML code will define the structure of the Modal, and the CSS code will style it.

<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>


<div class="m-10">
    <h1 class="text-2xl mb-5">Simple Modal with AlpineJS</h1>
    <!-- Modal -->
    <div x-data="{ showModal : false }">
        <!-- Button -->
        <button @click="showModal = !showModal" class="px-4 py-2 text-sm bg-white rounded-xl border transition-colors duration-150 ease-linear border-gray-200 text-gray-500 focus:outline-none focus:ring-0 font-bold hover:bg-gray-50 focus:bg-indigo-50 focus:text-indigo">Open Modal</button>

        <!-- Modal Background -->
        <div x-show="showModal" class="fixed text-gray-500 flex items-center justify-center overflow-auto z-50 bg-black bg-opacity-40 left-0 right-0 top-0 bottom-0" x-transition:enter="transition ease duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
            <!-- Modal -->
            <div x-show="showModal" class="bg-white rounded-xl shadow-2xl p-6 sm:w-10/12 mx-10" @click.away="showModal = false" x-transition:enter="transition ease duration-100 transform" x-transition:enter-start="opacity-0 scale-90 translate-y-1" x-transition:enter-end="opacity-100 scale-100 translate-y-0" x-transition:leave="transition ease duration-100 transform" x-transition:leave-start="opacity-100 scale-100 translate-y-0" x-transition:leave-end="opacity-0 scale-90 translate-y-1">
                <!-- Title -->
                <span class="font-bold block text-2xl mb-3">🍺 Beer, beer, beer </span>
                <!-- Some beer 🍺 -->
                <p class="mb-5">beer, beer, beer... beer, beer, beer... beer, beer, beer... beer, beer, beer...</p>
                <p>beer, beer, beer... beer, beer, beer... beer, beer, beer... beer, beer, beer... beer, beer, beer... beer, beer, beer... beer, beer, beer...</p>

                <!-- Buttons -->
                <div class="text-right space-x-5 mt-5">
                    <button @click="showModal = !showModal" class="px-4 py-2 text-sm bg-white rounded-xl border transition-colors duration-150 ease-linear border-gray-200 text-gray-500 focus:outline-none focus:ring-0 font-bold hover:bg-gray-50 focus:bg-indigo-50 focus:text-indigo">Cancel</button>
                    <a href="https://www.buymeacoffee.com/fricki" target="_blank" class="px-4 py-2 text-sm bg-white rounded-xl border transition-colors duration-150 ease-linear border-gray-200 text-gray-500 focus:outline-none focus:ring-0 font-bold hover:bg-gray-50 focus:bg-indigo-50 focus:text-indigo">🍺 Buy me a beer!</a>
                </div>
            </div>
        </div>
    </div>

    <div class="mb-10 pb-10 border-b border-gray-200"></div>

    <a href="https://www.buymeacoffee.com/fricki" target="_blank" class="rounded p-3 bg-yellow-50 text-yellow-800 border-l-2 border-yellow-800 block">
        🍺 Buy me a beer!
    </a>
</div>

How to create a Modal with Tailwind CSS?

Now that we have a basic understanding of Tailwind CSS and Modal UI components let's learn how to create a Modal with Tailwind CSS.

Step 1: Set up the HTML structure

The first step is to set up the HTML structure of the Modal. We will create a div element and give it a class of "modal". Inside the Modal div, we will create three more div elements with classes of "modal-header", "modal-body", and "modal-footer".

<div class="modal">
  <div class="modal-header">
    <h3 class="modal-title">Modal Title</h3>
  </div>
  <div class="modal-body">
    <p>Modal Content</p>
  </div>
  <div class="modal-footer">
    <button class="modal-btn">Cancel</button>
    <button class="modal-btn modal-btn-primary">OK</button>
  </div>
</div>

Step 2: Style the Modal

Now that we have set up the HTML structure of the Modal, let's style it with Tailwind CSS. We will use a combination of pre-defined CSS classes to style the Modal.

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-header {
  background-color: #ffffff;
  padding: 1rem;
  border-bottom: 1px solid #e2e8f0;
}

.modal-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

.modal-body {
  background-color: #ffffff;
  padding: 1rem;
}

.modal-footer {
  background-color: #ffffff;
  padding: 1rem;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: flex-end;
}

.modal-btn {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  padding: 0.5rem 1rem;
  margin-left: 0.5rem;
  cursor: pointer;
}

.modal-btn-primary {
  background-color: #4299e1;
  color: #ffffff;
  border: none;
}

Step 3: Add JavaScript to show and hide the Modal

The final step is to add JavaScript code to show and hide the Modal. We will add an event listener to the button that will show the Modal when clicked. We will also add an event listener to the background that will hide the Modal when clicked.

const modal = document.querySelector('.modal');
const modalBtn = document.querySelector('.modal-btn');
const modalBg = document.querySelector('.modal');

modalBtn.addEventListener('click', function() {
  modal.classList.add('modal-active');
});

modalBg.addEventListener('click', function(e) {
  if (e.target === modalBg) {
    modal.classList.remove('modal-active');
  }
});

Conclusion

In this article, we have learned how to build a Modal UI component with Tailwind CSS like a pro. We have covered the basics of Tailwind CSS, Modal UI components, and how to create a Modal with Tailwind CSS. With these tips, you can create beautiful and responsive Modals for your web applications quickly and easily.