I am developing a mobile capable menu in the “Form Header” slot and am having issues with the breakpoints rendering.
My code is fairly simple:
<div class="flex space-x-7">
<div>
<!-- Website Logo -->
<a href="/" class="flex items-center py-4 px-2">
<img src="data:image/png;base64,CODE" alt="Logo" class="w-16 mr-2">
</a>
</div>
<!-- Primary Navbar items -->
<div class="hidden md:flex items-center space-x-1">
<a href="/#/" class="py-4 px-2 text-green-500 border-b-4 border-green-500 font-semibold ">Home</a>
<a href="/#/type1" class="py-4 px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300">New Type 1 Order</a>
<a href="/#/type2" class="py-4 px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300">New Type 2 Order</a>
<a href="/#/contact-info" class="py-4 px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300">Update Contact Information</a>
</div>
</div>
<!-- Secondary Navbar items -->
<div class="hidden md:flex items-center space-x-3 ">
<button @click="namedAction('logout')" class="py-2 px-2 font-medium text-gray-500 rounded hover:bg-green-500 hover:text-white transition duration-300">Log Out</button>
</div>
My issue is with the following:
<div class="hidden md:flex items-center space-x-1">
Using tailwind breakpoints you would expect this div to be hidden, but set to flex on any screen medium or larger.
However, I am experiencing that it is just ALWAYS hidden. I can manually remove hidden to show it rendering so I know the display itself is fine.
Is this a limitation to loading this menu in a slot, where the tailwind breakpoints aren’t respected until after everything is loaded?