'Tailwind and Alpine.js flicker

How do I fix flickering on tailwind and alpine.js? Already added x-cloak as per alpine.js . But still not fixed.

If the "default" state of an x-show on page load is "false", you may want to use x-cloak on the page to avoid "page flicker" (The effect that happens when the browser renders your content before Alpine is finished initializing and hiding it.) You can learn more about x-cloak in its documentation.

style.css (uncompiled)

@tailwind base;
@tailwind components;
@tailwind utilities;

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

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Site</title>

    <link rel="stylesheet" href="css/style.css" />

    <script src="js/alpine.js" defer></script>
  </head>
  <body class="bg-gray-50 font-sans flex flex-col min-h-screen">
    <header class="sticky top-0 z-50">

      <nav class="bg-white shadow">
        <div x-data="{ isOpen: false }" @click.outside="isOpen = false">
          <div class="container px-6 py-3 mx-auto">
            <div
              class="flex flex-col md:flex-row md:justify-between md:items-center"
            >
              <div class="flex items-center justify-between">
                <div class="flex items-center">
                  <a
                    class="text-2xl font-bold text-gray-800 transition-colors duration-200 transform lg:text-3xl hover:text-gray-700"
                    href="/"
                  >
                  Logo
                    <!-- <img
                      src="logo.png"
                      alt="logo"
                    /> -->
                  </a>

                  <!-- Search input on desktop screen -->
                  <div class="mx-3 md:mx-10 md:block">
                    <div class="relative">
                      <span
                        x-cloak
                        class="absolute inset-y-0 left-0 flex items-center pl-3"
                      >
                        <svg
                          class="w-5 h-5 text-gray-400"
                          viewBox="0 0 24 24"
                          fill="none"
                        >
                          <path
                            d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z"
                            stroke="currentColor"
                            stroke-width="2"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                          ></path>
                        </svg>
                      </span>

                      <input
                        type="text"
                        class="w-full py-2 pl-10 pr-4 text-gray-700 bg-white border rounded-md"
                        placeholder="Search"
                      />
                    </div>
                  </div>
                </div>

                <!-- Mobile menu button -->
                <div class="flex md:hidden" x-cloak>
                  <button
                    type="button"
                    class="text-gray-500 hover:text-gray-600"
                    aria-label="toggle menu"
                    @click="isOpen = !isOpen"
                    x-cloak
                  >
                    <svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
                      <path
                        fill-rule="evenodd"
                        d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"
                      ></path>
                    </svg>
                  </button>
                </div>
              </div>

              <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
              <div
                :class="isOpen ? 'block' : 'hidden'"
                class="items-center md:flex"
                x-cloak
              >
                <div
                  class="flex flex-col mt-2 md:flex-row md:mt-0 md:mx-1"
                  x-cloak
                >
                  <a
                    class="my-1 text-sm leading-5 text-gray-700 hover:text-cyan-700 hover:underline md:mx-4 md:my-0"
                    href="/"
                    >Home</a
                  >
                  <a
                    class="my-1 text-sm leading-5 text-gray-700 hover:text-cyan-700 hover:underline md:mx-4 md:my-0"
                    href="/page"
                    >Page</a
                  >
                </div>

                <div class="flex items-center py-2 -mx-1 md:mx-0" x-cloak>
                  <a
                    class="block w-1/2 px-3 md:px-5 py-2 md:py-3 mx-1 text-sm font-medium leading-5 text-center text-gray-700 transition-colors duration-200 transform rounded md:mx-2 md:w-auto border shadow"
                    href="#"
                    >Login</a
                  >
                  <a
                    class="block w-1/2 px-3 md:px-5 py-2 md:py-3 mx-1 text-sm font-medium leading-5 text-center text-gray-100 transition-colors duration-200 transform bg-cyan-600 rounded hover:bg-cyan-700 md:mx-0 md:w-auto border border-cyan-600 shadow"
                    href="#"
                    >Register</a
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </nav>
    </header>

    <main></main>
  </body>
</html>

I even tried to record it.

Any help is greatly appreciated.

Solution 1:^[1]

How big is your style.css bundle file? Try dropping

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

directly into the <head> above your style.css import and see if that fixes it. If that doesn't fix it, I would probably start looking at the waterfall for that CSS bundle file in the devtools Network > CSS. If you're bundle is big, keep in mind it wont block rendering of what's in the body.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	James0r

'Tailwind and Alpine.js flicker

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]