Creating a Dialogue/Modal with Tailwind CSS: A Step-by-Step Guide
Welcome to AyyazTech! Today, we'll dive into how to create a dialogue or modal using the popular utility-first CSS framework, Tailwind CSS.
Before we begin, ensure you have a Tailwind CSS project setup. If you're unfamiliar with setting up Tailwind, you can refer to our comprehensive guide available on our YouTube playlist.
Step 1: Setting Up the Trigger Button
To begin with, let’s add a button to trigger our modal. We'll call it "Open Modal". Here's how you can style it using Tailwind:
<button class="px-4 py-2 rounded">Open Modal</button>
1<button class="px-4 py-2 rounded">Open Modal</button>Step 2: Designing the Modal Overlay
Every modal needs an overlay. This typically appears as a slightly darkened background that focuses user attention on the modal content. Here's how you can create one:
<div class="fixed left-0 top-0 bg-black opacity-50 w-screen h-screen"></div>
1<div class="fixed left-0 top-0 bg-black opacity-50 w-screen h-screen"></div>Step 3: Crafting the Modal Structure
Within the overlay, let's design the actual modal. The modal will have a clean, white background and rounded corners:
<div class="bg-white rounded shadow-md p-8 mx-auto my-20 w-1/4">
<!-- Modal content will go here -->
</div>1<div class="bg-white rounded shadow-md p-8 mx-auto my-20 w-1/4">
2 <!-- Modal content will go here -->
3</div>Step 4: Adding Icons and Text
For demonstration, let's say our modal is a warning dialogue. We'll use an icon and some text:
- For icons, I recommend using Heroicons. It's an excellent resource by the makers of Tailwind CSS.
- For the message, let's include a heading and a paragraph warning the user about deactivating their account.
<div class="flex items-center gap-5">
<div class="bg-red-200 rounded-full p-5 text-red-500 flex items-center justify-center w-10 h-10">
<!-- Your SVG icon here -->
</div>
<div>
<h1 class="font-bold text-lg mb-7">Deactivate Account</h1>
<p>Are you sure you want to deactivate your account? All of your data will be permanently removed. This action cannot be undone.</p>
</div>
</div>1<div class="flex items-center gap-5">
2 <div class="bg-red-200 rounded-full p-5 text-red-500 flex items-center justify-center w-10 h-10">
3 <!-- Your SVG icon here -->
4 </div>
5 <div>
6 <h1 class="font-bold text-lg mb-7">Deactivate Account</h1>
7 <p>Are you sure you want to deactivate your account? All of your data will be permanently removed. This action cannot be undone.</p>
8 </div>
9</div>Step 5: Modal Actions
Finally, let's add some action buttons to allow users to either confirm the action or cancel it:
<div class="flex justify-end gap-4 mt-5">
<button class="bg-gray-100 border border-gray-300 px-6 py-2 rounded text-black hover:bg-gray-200">Cancel</button>
<button class="bg-red-500 px-6 py-2 rounded text-white hover:bg-red-600">Deactivate</button>
</div>1<div class="flex justify-end gap-4 mt-5">
2 <button class="bg-gray-100 border border-gray-300 px-6 py-2 rounded text-black hover:bg-gray-200">Cancel</button>
3 <button class="bg-red-500 px-6 py-2 rounded text-white hover:bg-red-600">Deactivate</button>
4</div>Step 6: Implementing the Modal Logic
Using a little bit of JavaScript, you can now control the opening and closing of the modal:
function showDialog() {
let dialog = document.getElementById('dialog');
dialog.classList.remove('hidden');
setTimeout(() => {
dialog.classList.remove('opacity-0');
}, 20);
}
function hideDialog() {
let dialog = document.getElementById('dialog');
dialog.classList.add('opacity-0');
setTimeout(() => {
dialog.classList.add('hidden');
}, 500);
}
// Attach these functions to your button and modal overlay respectively.1function showDialog() {
2 let dialog = document.getElementById('dialog');
3 dialog.classList.remove('hidden');
4 setTimeout(() => {
5 dialog.classList.remove('opacity-0');
6 }, 20);
7}
8function hideDialog() {
9 let dialog = document.getElementById('dialog');
10 dialog.classList.add('opacity-0');
11 setTimeout(() => {
12 dialog.classList.add('hidden');
13 }, 500);
14}
15// Attach these functions to your button and modal overlay respectively.Complete 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>
<!-- Assuming you have set up Tailwind CSS in your project -->
<link rel="stylesheet" href="path_to_your_tailwind.css">
<style>
/* Custom styles can go here */
</style>
</head>
<body>
<!-- Trigger Button -->
<button class="px-4 py-2 rounded" onclick="showDialog()">Open Modal</button>
<!-- Modal Overlay and Content -->
<div id="dialog" class="fixed left-0 top-0 bg-black opacity-0 hidden w-screen h-screen transition-opacity duration-500" onclick="hideDialog()">
<div class="bg-white rounded shadow-md p-8 mx-auto my-20 w-1/4">
<div class="flex items-center gap-5">
<div class="bg-red-200 rounded-full p-5 text-red-500 flex items-center justify-center w-10 h-10">
<!-- Your SVG icon can be placed here -->
</div>
<div>
<h1 class="font-bold text-lg mb-2">Deactivate Account</h1>
<p>Are you sure you want to deactivate your account? All of your data will be permanently removed. This action cannot be undone.</p>
</div>
</div>
<div class="flex justify-end gap-4 mt-5">
<button class="bg-gray-100 border border-gray-300 px-6 py-2 rounded text-black hover:bg-gray-200" onclick="hideDialog()">Cancel</button>
<button class="bg-red-500 px-6 py-2 rounded text-white hover:bg-red-600">Deactivate</button>
</div>
</div>
</div>
<script>
function showDialog() {
let dialog = document.getElementById('dialog');
dialog.classList.remove('hidden');
setTimeout(() => {
dialog.classList.remove('opacity-0');
}, 20);
}
function hideDialog() {
let dialog = document.getElementById('dialog');
dialog.classList.add('opacity-0');
setTimeout(() => {
dialog.classList.add('hidden');
}, 500);
}
</script>
</body>
</html>1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Modal with Tailwind CSS</title>
7 <!-- Assuming you have set up Tailwind CSS in your project -->
8 <link rel="stylesheet" href="path_to_your_tailwind.css">
9 <style>
10 /* Custom styles can go here */
11 </style>
12</head>
13<body>
14
15<!-- Trigger Button -->
16<button class="px-4 py-2 rounded" onclick="showDialog()">Open Modal</button>
17<!-- Modal Overlay and Content -->
18<div id="dialog" class="fixed left-0 top-0 bg-black opacity-0 hidden w-screen h-screen transition-opacity duration-500" onclick="hideDialog()">
19 <div class="bg-white rounded shadow-md p-8 mx-auto my-20 w-1/4">
20 <div class="flex items-center gap-5">
21 <div class="bg-red-200 rounded-full p-5 text-red-500 flex items-center justify-center w-10 h-10">
22 <!-- Your SVG icon can be placed here -->
23 </div>
24 <div>
25 <h1 class="font-bold text-lg mb-2">Deactivate Account</h1>
26 <p>Are you sure you want to deactivate your account? All of your data will be permanently removed. This action cannot be undone.</p>
27 </div>
28 </div>
29 <div class="flex justify-end gap-4 mt-5">
30 <button class="bg-gray-100 border border-gray-300 px-6 py-2 rounded text-black hover:bg-gray-200" onclick="hideDialog()">Cancel</button>
31 <button class="bg-red-500 px-6 py-2 rounded text-white hover:bg-red-600">Deactivate</button>
32 </div>
33 </div>
34</div>
35<script>
36 function showDialog() {
37 let dialog = document.getElementById('dialog');
38 dialog.classList.remove('hidden');
39 setTimeout(() => {
40 dialog.classList.remove('opacity-0');
41 }, 20);
42 }
43 function hideDialog() {
44 let dialog = document.getElementById('dialog');
45 dialog.classList.add('opacity-0');
46 setTimeout(() => {
47 dialog.classList.add('hidden');
48 }, 500);
49 }
50</script>
51</body>
52</html>
And there you have it! A simple modal/dialogue using Tailwind CSS. If you found this guide helpful, please consider subscribing to our YouTube channel, AyyazTech, for more such content. Also, don’t forget to click on the bell icon to stay updated with our new videos. Like, share, and drop your feedback or questions in the comment section below.
Thank you for reading, and see you next time!