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 (unpiled)
@tailwind base;
@tailwind ponents;
@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.
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 (unpiled)
@tailwind base;
@tailwind ponents;
@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.
Share Improve this question asked Mar 15, 2022 at 12:14 user3569641user3569641 9221 gold badge19 silver badges51 bronze badges 2- Is this in production or development mode? – Jax-p Commented Mar 15, 2022 at 12:18
- This is happening in both environment. But it show much in development. – user3569641 Commented Mar 15, 2022 at 12:19
1 Answer
Reset to default 6How 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.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745167920a4614747.html
评论列表（0条）