Create Dropdowns Alpine js  With Tailwind CSS

In this tutorial we will see dropdown examples with apine js and tailwind css.



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 Dropdown UI

<div class="relative">
    <!-- Dropdown toggle button -->
    <button class="flex items-center p-2 bg-white bg-gray-100 rounded-md">
        <span class="mr-4">Dropdown </span>
    </button>
    <!-- Dropdown list -->
    <div class="absolute right-0 py-2 mt-2 bg-white bg-gray-100 rounded-md shadow-xl w-44">
        <a href="#" class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white">
            Dropdown List 1
        </a>
        <a href="#" class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white">
            Dropdown List 2
        </a>
        <a href="#" class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white">
            Dropdown List 3
        </a>
    </div>
</div> 



Dropdowns Working with Alpinejs

<div x-data="{dropdownMenu: false}" class="relative">
    <!-- Dropdown toggle button -->
    <button @click="dropdownMenu = ! dropdownMenu" class="flex items-center p-2 bg-white bg-gray-100 rounded-md">
        <span class="mr-4">Dropdown </span>
    </button>
    <!-- Dropdown list -->
    <div x-show="dropdownMenu" class="absolute right-0 py-2 mt-2 bg-white bg-gray-100 rounded-md shadow-xl w-44">
        <a href="#" class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white">
            Dropdown List 1
        </a>
        <a href="#" class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white">
            Dropdown List 2
        </a>
        <a href="#" class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white">
            Dropdown List 3
        </a>
    </div>
</div>



Tags: