Experience with TailwindCSS and AlpineJS in my current project has brought to my attention a slight issue with the header dropdowns flashing open momentarily when the login page loads. I attempted to use x-cloak to address this, but encountered some difficulties that I can't quite figure out, as I've successfully implemented it on other pages.
Below is the code snippet in question:
<!-- Header -->
<nav x-data="{ showMenu: false, resourcesOpen: false, learnOpen: false }" class="bg-blue-800 shadow-xs">
<div class="max-w-full px-4 lg:px-6">
<div class="flex justify-between h-16">
<!-- Mobile menu button -->
<!-- Left Side -->
<div class="flex flex-row">
<!-- Logo -->
<a class="flex items-center justify-center mr-12" href="#">
<img class="hidden w-auto h-10 lg:block" src="/img/logo/angel-white-lg.png" alt="Angel Logo">
<img class="block w-auto h-10 lg:hidden" src="/img/logo/angel-white-sm.png" alt="Angel Logo">
</a>
<!-- Dropdowns -->
<div class="hidden lg:flex">
<!-- Resources -->
<div x-cloak @mouseleave="resourcesOpen = false" class="hidden ml-6 lg:ml-0 2xl:ml-4 md:flex" id="nav-heading" aria-labelledby="nav-heading" x-cloak :aria-expanded="resourcesOpen">
<button type="button" class="inline-flex items-center px-3 py-2 text-base font-bold leading-3 text-gray-100 transition duration-150 ease-in-out border-b-2 hover:border-indigo-500 focus:no-underline lg:text-md hover:no-underline hover:text-gray-100 focus:outline-none focus:border-indigo-700 focus:text-gray-100" :aria-expanded="resourcesOpen" aria-controls="nav-list" @mouseenter="resourcesOpen = !resourcesOpen" @click.away="resourcesOpen = false">
Recursos
</button>
<div x-show.transition.in.duration.300ms.origin.top.left.opacity.scale.10.out.duration.300ms.origin.top.left.opacity.scale.10="resourcesOpen === true" id="nav-list" style="padding-left: 221px" class="absolute left-0 z-50 w-screen origin-top-left bg-blue-800 shadow-lg top-16">
<!--
Trade dropdown panel, show/hide based on dropdown state.
-->
<div class="flex w-screen py-2 bg-blue-800 shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
<div class="flex flex-col">
<a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
Security
</a>
<a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
Estrutura de Taxas
</a>
<a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
Founding Options
</a>
<a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-unde...
<style>
[x-cloak] {
display: none;
}
</style>
Here's a snapshot of the issue occurring during page load. https://i.sstatic.net/VoLD4.png