How to create a dropdown nav with laravel and tailwind css?

1
2
3
4
5

composer create-project --prefer-dist laravel/laravel project-name
cd project-name
npm install
npm install tailwindcss
npx tailwindcss init

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

<div class="bg-gray-800">
    <div class="container mx-auto">
        <nav class="flex justify-between items-center py-4">
            <div class="flex">
                <a href="/" class="text-white mr-4">Home</a>
                <div class="dropdown inline-block relative">
                    <button class="text-white focus:outline-none">Dropdown</button>
                    <ul class="dropdown-menu absolute hidden text-gray-700 pt-1">
                        <li><a href="#" class="bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap">Option 1</a></li>
                        <li><a href="#" class="bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap">Option 2</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</div>

1
2
3
4
5
6
7

.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-menu {
    display: none;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

document.addEventListener('DOMContentLoaded', function () {
    var dropdowns = document.querySelectorAll('.dropdown');

    dropdowns.forEach(function (dropdown) {
        dropdown.addEventListener('click', function () {
            var menu = this.querySelector('.dropdown-menu');
            menu.classList.toggle('hidden');
        });
    });
});

1

npm run dev