Getting TailwindUI Dropdown Menu to work in PHP with Alpine.js

For over the last two weeks, I have been working on a project developing a very simple attentive tracker for my personal use. I decided I wanted a thorough review of PHP before migrating the project over to Laravel. As usual, when I was working on the app, I used Tailwind CSS, in particularly, TailwindUI.

Since only the transition directives for all the components were written either in React, or Vue, I needed to add the directives myself. In the past, with SvelteKit, I used a custom headless UI component. For this project, it was recommended to use Alpine.js.

So the first task is obviously to create your header component with TailwindUI’s header component with the HTML source code. Since this project is still in development, I am using Tailwind's Play CDN.  For a fully maximized browser view, you will not see the hamburger menu icon. As you minimize your browser, the hidden menu will appear, but both the hamburger icon and close icon are not functioning. This is where Alpine.js’s x-data direction comes into play. You can read more about it on the TailwindUI website.

First, if you have not done it yet, add the Alpine.js script tag inside your HTML header tag:

<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>

Now add the x-data directive in a div tag around the entire header component. This threw me off a bit until I formatted all the tags in VS Code:

Then locate the first button element that is below the visible menu and add the x-on directive which runs the code in the DOM:

Then wrap the x-show directive in a div around the mobile menu items. Also, place the template directive around the mobile menu items div. We will talk more about this shortly.

Like the first button element, add the x-on directive to the second button element for the mobile menu:

Finally, add the x-transition directive to the x-show directive for the mobile menu.

Now, the reason we had to wrap the template directive around the mobile menu is to avoid the blip when the browser starts to load the hidden menu. You will see part of the mobile menu elements appear. The x-if directive "cloaks," or hides, this menu until it is fully loaded.

When you are done, your fully maximized browser should look like below:

With your browser minimized, you should see the hamburger icon with no mobile menu items listed.

Then, after clicking on the hamburger menu icon, you should see the mobile menu and the close icon. If this works, clicking on the close icon will close the menu.

I know this is all simplified, I will eventually make the entire website open source at GitHub. I am still working on this project and wanted to share how I got the TailwindUI dropdown menu to work with Alpine.js. This post is more of a note to me.

You can add me on GitHub (kevmille), Twitter (@MatsunagaKevin), or Mastodon, to learn when I will make the repository public.

I will update this post as my project progresses and make changes.