Create a Modal Alpine js With Tailwind CSS

In this tutorial we will create a simple modal with tailwind css and alpine js .

Tool Use

Tailwind CSS 2.x

Alpine Js 3.x or 2.x

Setup Project

Using CDN

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

or

The Easiest way to install Tailwind CSS with Tailwind CLI

How to Install Tailwind CSS with NPM

Using Apline Js 3.x CDN

Note: you can also use alpine js 2.x version

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

Create Modal UI

<h3 class="p-4 mt-20 text-3xl text-center text-bold">Simple Modal</h3>
<div class="container flex justify-center mx-auto">
    <button class="px-6 py-2 text-white bg-blue-600 rounded shadow-xl" type="button">open
        model</button>
    <div class="absolute inset-0 flex items-center justify-center bg-gray-700 bg-opacity-50">
        <div class="max-w-sm p-6 bg-white">
            <div class="flex items-center justify-between">
                <h3 class="text-2xl">Model Title</h3>
                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>

            </div>
            <div class="mt-4">
                <p class="mb-4 text-sm">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus
                    qui
                    nihil laborum
                    quaerat blanditiis nemo explicabo voluptatum ea architecto corporis quo vitae, velit
                    temporibus eaque quisquam in quis provident necessitatibus.</p>
                <button class="px-4 py-2 text-white bg-red-600 rounded">Cancel</button>
                <button class="px-4 py-2 text-white bg-green-600 rounded">Save</button>
            </div>
        </div>
    </div>
</div>

Modals Working with Alpinejs

<div x-data="{show:false}" class="container flex justify-center mx-auto">
    <button @click="show=true" class="px-6 py-2 text-white bg-blue-600 rounded shadow-xl" type="button">open
        model</button>
    <div x-show="show" class="absolute inset-0 flex items-center justify-center bg-gray-700 bg-opacity-50">
        <div @click.away="show = false" class="max-w-sm p-6 bg-white ">
            <div class="flex items-center justify-between">
                <h3 class="text-2xl">Model Title</h3>
                <svg @click="show=false" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none"
                    viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>

            </div>
            <div class="mt-4">
                <p class="mb-4 text-sm">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus
                    qui
                    nihil laborum
                    quaerat blanditiis nemo explicabo voluptatum ea architecto corporis quo vitae, velit
                    temporibus eaque quisquam in quis provident necessitatibus.</p>
                <button @click="show=false" class="px-4 py-2 text-white bg-red-600 rounded">Cancel</button>
                <button class="px-4 py-2 text-white bg-green-600 rounded">Save</button>
            </div>
        </div>
    </div>
</div>