I'm using TailwindCSS and AlpineJS in my project and, when loading the login page, for a brief moment there is a flash of the header dropdowns opening. For this, I try to use x-cloak, but it is not working properly and I cannot understand why, since I used it on other pages and it worked perfectly.

This is my code snippet:

    <!-- 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-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
                                        Staking
                                    </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">
                                        24/7 Support
                                    </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">
                                        Liquidity
                                    </a>
                                </div>
                                <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">
                                        Margin Trading
                                    </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">
                                        Índices
                                    </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">
                                        Futures
                                    </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">
                                        OTC
                                    </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">
                                        Account Management
                                    </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">
                                        Cryptowatch
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Prices -->
                    <div class="hidden ml-6 lg:ml-0 2xl:ml-4 md:flex">
                        <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">
                            Preços
                        </button>
                    </div>
                    <!-- Learn -->
                    <div x-cloak @mouseleave="learnOpen = false" class="hidden ml-6 lg:ml-0 2xl:ml-4 md:flex" id="nav-heading" aria-labelledby="nav-heading" x-cloak :aria-expanded="learnOpen">
                        <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="learnOpen" aria-controls="nav-list" @mouseenter="learnOpen = !learnOpen" @click.away="learnOpen = false">
                            Learn
                        </button>
                        <div x-show.transition.in.duration.300ms.origin.top.left.opacity.scale.10.out.duration.300ms.origin.top.left.opacity.scale.10="learnOpen === true" id="nav-list" style="padding-left: 386px" 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 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">
                                        Crypto Guides
                                    </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">
                                        Videos
                                    </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">
                                        Podcast
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Support -->
                    <div class="hidden ml-6 lg:ml-0 2xl:ml-4 md:flex">
                        <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">
                            Support
                        </button>
                    </div>
                    <!-- Futures -->
                    <div class="hidden ml-6 lg:ml-0 2xl:ml-4 md:flex">
                        <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">
                            Futures
                        </button>
                    </div>
                    <!-- Institutions -->
                    <div class="hidden ml-6 lg:ml-0 2xl:ml-4 md:flex">
                        <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">
                            Institutions
                        </button>
                    </div>
                </div>
            </div>
      </div>
  </div>

<style>
    [x-cloak] {
      display: none;
    }
</style>

And here's a screenshot of the flashes occurring when the page loads.

I'm using TailwindCSS and AlpineJS in my project and, when loading the login page, for a brief moment there is a flash of the header dropdowns opening. For this, I try to use x-cloak, but it is not working properly and I cannot understand why, since I used it on other pages and it worked perfectly.

This is my code snippet:

    <!-- 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-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
                                        Staking
                                    </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">
                                        24/7 Support
                                    </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">
                                        Liquidity
                                    </a>
                                </div>
                                <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">
                                        Margin Trading
                                    </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">
                                        Índices
                                    </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">
                                        Futures
                                    </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">
                                        OTC
                                    </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">
                                        Account Management
                                    </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">
                                        Cryptowatch
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Prices -->
                    <div class="hidden ml-6 lg:ml-0 2xl:ml-4 md:flex">
                        <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">
                            Preços
                        </button>
                    </div>
                    <!-- Learn -->
                    <div x-cloak @mouseleave="learnOpen = false" class="hidden ml-6 lg:ml-0 2xl:ml-4 md:flex" id="nav-heading" aria-labelledby="nav-heading" x-cloak :aria-expanded="learnOpen">
                        <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="learnOpen" aria-controls="nav-list" @mouseenter="learnOpen = !learnOpen" @click.away="learnOpen = false">
                            Learn
                        </button>
                        <div x-show.transition.in.duration.300ms.origin.top.left.opacity.scale.10.out.duration.300ms.origin.top.left.opacity.scale.10="learnOpen === true" id="nav-list" style="padding-left: 386px" 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 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">
                                        Crypto Guides
                                    </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">
                                        Videos
                                    </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">
                                        Podcast
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Support -->
                    <div class="hidden ml-6 lg:ml-0 2xl:ml-4 md:flex">
                        <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">
                            Support
                        </button>
                    </div>
                    <!-- Futures -->
                    <div class="hidden ml-6 lg:ml-0 2xl:ml-4 md:flex">
                        <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">
                            Futures
                        </button>
                    </div>
                    <!-- Institutions -->
                    <div class="hidden ml-6 lg:ml-0 2xl:ml-4 md:flex">
                        <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">
                            Institutions
                        </button>
                    </div>
                </div>
            </div>
      </div>
  </div>

<style>
    [x-cloak] {
      display: none;
    }
</style>

And here's a screenshot of the flashes occurring when the page loads.

• javascript
• html
• css
• tailwind-css
• alpine.js

Share Improve this question Follow edited Nov 19, 2020 at 16:26 Fernando Rodrigues Coelho asked Nov 19, 2020 at 15:16 Fernando Rodrigues CoelhoFernando Rodrigues Coelho 38411 gold badge55 silver badges1717 bronze badges 1

• It sounds like you're loading a few other things before your CSS on the login page. Is the x-cloak style in the page head or in an external css file? – Steve O Commented Nov 24, 2020 at 12:07

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

put the x-cloack on the outside nav

<nav 
    x-data="{ showMenu: false, resourcesOpen: false, learnOpen: false }" 
    class="bg-blue-800 shadow-xs"
    x-cloak
 >

notice that i put the x-cloak on the outside nav so it does not show the navigation at all before alpine initialize

We also need to add the following CSS on the relevant page. I just ran into this issue and found the CSS to add on the page from the official docs.

[x-cloak] { display: none !important; }

so the plete solution is adding x-cloak to the tag

<div x-cloak></div>