In this guide, you’ll learn how to use TailwindCSS and Alpine JS to create a simple but beautiful modal. You can use this modal anywhere on your website to display any content you want.
Step 1: Create a modal with TailwindCSS
The first step is to create a modal with TailwindCSS. You can follow this nice tutorial about how to design a simple modal in TailwindCSS. Check the final code from that example that creates a simple modal.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<div class="flex h-screen w-full items-center justify-center bg-gray-600/50"> <div class="flex-cols relative m-4 flex h-3/4 max-w-3xl flex-col items-center justify-center space-y-10 rounded-lg bg-white p-5 sm:m-10 sm:h-1/2 sm:p-20" > <h1 class="text-3xl font-bold">Attention Required!</h1> <p> By enabling cookies, you are giving us an oppurtunity to deliver the best results with the advertisements on the website. Please Accept the cookes and contunue browsing on the website. </p> <div class="flex w-full justify-between"> <button class="rounded-md bg-gray-300 px-4 py-2 text-black"> Reject Cookies </button> <button class="rounded-md bg-green-600 px-4 py-2 text-white"> Accept Cookies </button> </div> <button class="absolute -top-8 right-2" @click="open=false"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6" > <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg> </button> </div> </div> |
Step 2: Adding a Modal State with Alpine JS
The second step is to add a state variable with Alpine JS to keep track state of the modal. The following code adds a open state variable which is false by default.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<div x-data="{open:false}" class="flex h-full w-full flex-col items-center justify-center"> <div class="flex h-screen w-full items-center justify-center bg-gray-600/50"> <div class="flex-cols relative m-4 flex h-3/4 max-w-3xl flex-col items-center justify-center space-y-10 rounded-lg bg-white p-5 sm:m-10 sm:h-1/2 sm:p-20" > <h1 class="text-3xl font-bold">Attention Required!</h1> <p> By enabling cookies, you are giving us an oppurtunity to deliver the best results with the advertisements on the website. Please Accept the cookes and contunue browsing on the website. </p> <div class="flex w-full justify-between"> <button class="rounded-md bg-gray-300 px-4 py-2 text-black"> Reject Cookies </button> <button class="rounded-md bg-green-600 px-4 py-2 text-white"> Accept Cookies </button> </div> <button class="absolute -top-8 right-2" @click="open=false"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6" > <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg> </button> </div> </div> </div> |
Step 3: Create a Button to Show the Modal
Now, a button is required that will open the modal when clicked. The following code adds a button with a click handler to show the modal on the screen. Alpine JS x-ifdirectives are also added with two templates to show the modal with conditions. Please read about using if else conditions in Alpine JS.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<div x-data="{open:false}" class="flex h-full w-full flex-col items-center justify-center" > <template x-if="!open"> <div class=""> <button class="mt-20 rounded-md bg-blue-700 px-5 py-2 text-white" @click="open=true" > Open Modal </button> </div> </template> <template x-if="open"> <div class="flex h-screen w-full items-center justify-center bg-gray-600/50"> <div class="flex-cols relative m-4 flex h-3/4 max-w-3xl flex-col items-center justify-center space-y-10 rounded-lg bg-white p-5 sm:m-10 sm:h-1/2 sm:p-20" > <h1 class="text-3xl font-bold">Attention Required!</h1> <p> By enabling cookies, you are giving us an oppurtunity to deliver the best results with the advertisements on the website. Please Accept the cookes and contunue browsing on the website. </p> <div class="flex w-full justify-between"> <button class="rounded-md bg-gray-300 px-4 py-2 text-black"> Reject Cookies </button> <button class="rounded-md bg-green-600 px-4 py-2 text-white"> Accept Cookies </button> </div> <button class="absolute -top-8 right-2"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6" > <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg> </button> </div> </div> </template> </div> |
Step 4: Hiding Modal with Close Button
The last is to hide the modal when the user clicks on the close button. For this, you can add a simple click handler that will set the state to false. The following code example illustrates the hiding logic of the modal with Alpine JS.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<div x-data="{open:false}" class="flex h-full w-full flex-col items-center justify-center" > <template x-if="!open"> <div class=""> <button class="mt-20 rounded-md bg-blue-700 px-5 py-2 text-white" @click="open=true" > Open Modal </button> </div> </template> <template x-if="open"> <div class="flex h-screen w-full items-center justify-center bg-gray-600/50"> <div class="flex-cols relative m-4 flex h-3/4 max-w-3xl flex-col items-center justify-center space-y-10 rounded-lg bg-white p-5 sm:m-10 sm:h-1/2 sm:p-20" > <h1 class="text-3xl font-bold">Attention Required!</h1> <p> By enabling cookies, you are giving us an oppurtunity to deliver the best results with the advertisements on the website. Please Accept the cookes and contunue browsing on the website. </p> <div class="flex w-full justify-between"> <button class="rounded-md bg-gray-300 px-4 py-2 text-black"> Reject Cookies </button> <button class="rounded-md bg-green-600 px-4 py-2 text-white"> Accept Cookies </button> </div> <button class="absolute -top-8 right-2" @click="open=false" > <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6" > <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg> </button> </div> </div> </template> </div> |
You can check the working example of the modal and download the source code from the GitHub repository.
Conclusion
You can create an awesome modal with TailwindCSS and Alpine JS. TailwindCSS lets you design the user interface of the modal quickly with utility classes. Alpine JS can handle the logic to show and hide the modal. This modal can be used anywhere in the project for many purposes like displaying a notification, filling out a newsletter form, or anything else.