modal in Tailwindcss and Alpine JS

How to create a modal in TailwindCSS and Alpine JS?

In this tutorial, we will show you to create a modal in TailwindCSS and Alpine JS.

The modal component can be used as an interactive dialogue on top of the website’s main content area to display notifications and collect information from users via form components.

In order to create a modal with Tailwind CSS you only need to include the TailwindCSS and Alpine.js. We will simply go with the CDN links for both.

TailwindCSS CDN link

<script src="https://cdn.tailwindcss.com"></script>

Alpine.js CDN link

<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>

After including the CDN links for TailwindCSS and Alpine.js. Create a wrapper for alpine.js x-data. Define x-data="{showModal: false}". The property showModal will help us to show and hide the modal.

<div class="p-4 lg:p-10" x-data="{showModal: false}">
<!-- button code -->
<!-- modal code -->
</div>

Create a button to call modal

Now create a button and change the showModal = false to showModal = true with the help of an Alpine.js click event. we will control the modal with the x-show="showModal" later in this tutorial.

<button
@click="showModal = true"
class="bg-orange-500 rounded px-4 py-2 text-gray-900 cursor-pointer dark:text-gray-100">
Show Modal</button>

Actual code of modal. Here we are using the x-show directive of Alpine.js. Also, we are binding the class .flex and .hidden on the basis of showModal property.

Here is the preview of the modal.

create a modal in TailwindCSS and Alpine JS

Full code of Tailwindcss and Alpine.js Modal

<button @click="showModal = true"
    class="bg-orange-500 rounded px-4 py-2 text-gray-900 cursor-pointer dark:text-gray-100">
    Show Modal</button>

<div class="overflow-hidden">
    <div x-show="showModal" tabindex="-1" :class="showModel ? 'flex' : 'hidden'"
        class="flex bg-opacity-60 bg-gray-700 filter backdrop-blur-sm fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-screen justify-center items-center">
        <div class="relative p-4 w-full max-w-md h-full md:h-auto" @click.outside="showModal = false">
            <div class="relative bg-white rounded dark:bg-gray-100">
                <button @click="showModal = false" type="button"
                    class="absolute top-3 right-2.5 text-gray-700 hover:text-white hover:bg-orange-500 rounded-full text-sm p-1.5 ml-auto inline-flex items-center"
                    data-modal-toggle="tailwind-modal">
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd"
                            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                            clip-rule="evenodd"></path>
                    </svg>
                </button>

                <div class="py-4 px-6 rounded-t border-b dark:border-gray-300">
                    <h3 class="text-base font-light text-orange-500 lg:text-xl">
                        Share on Social Media
                    </h3>
                </div>

                <div class="p-6">
                    <p class="text-sm font-light text-gray-40">
                        Share our amazing content with social media friends and
                        family.
                    </p>
                    <ul class="my-4 space-y-3">
                        <li>
                            <a href="#"
                                class="flex items-center p-3 text-base font-light text-gray-900 bg-gray-50 rounded-lg hover:bg-gray-100 group hover:shadow dark:text-gray-700">
                                <span class="flex-1 ml-3 whitespace-nowrap tracking-wider">Facebook</span>
                            </a>
                        </li>
                        <li>
                            <a href="#"
                                class="flex items-center p-3 text-base font-light text-gray-900 bg-gray-50 rounded-lg hover:bg-gray-100 group hover:shadow dark:text-gray-700">
                                <span class="flex-1 ml-3 whitespace-nowrap tracking-wider">Instagram</span>
                            </a>
                        </li>
                        <li>
                            <a href="#"
                                class="flex items-center p-3 text-base font-light text-gray-900 bg-gray-50 rounded-lg hover:bg-gray-100 group hover:shadow dark:text-gray-700">
                                <span class="flex-1 ml-3 whitespace-nowrap tracking-wider">Twitter</span>
                            </a>
                        </li>
                    </ul>

                    <div class="border-t border-gray-200 pt-6 flex justify-end">
                        <button @click="showModal = false"
                            class="px-5 py-2 bg-orange-500 text-white rounded shadow shadow-orange-500/30">
                            Close
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

References

Read more about the TailwindCSS framework for creating an amazing UI for web applications.

https://tailwindcss.com/

Read more about Alpine.js It is a simple but useful lightweight JavaScript framework.

https://alpinejs.dev/

Add comment