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 / 3.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> 

Create Dropdowns Alpine js With Tailwind CSS v1

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>