Alpine JS Modal with TailwindCSS [Step by Step Guide]

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.

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.


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.

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.

You can check the working example of the modal and download the source code from the GitHub repository.


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.

Latest articles

Related articles