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/[email protected]^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>