CODEWITHSUNDEEP
csstailwind-csstailwind-in-jstailwind-ui
MagnusEffect
MagnusEffect

Reputation: 3925

How to resolve the shaking of the text in tailwind css?

When I hover the mouse pointer on any of the text, the text gets bold and then there is a little shaking of the text, how can we resolve that shaking of the text?

You can observe that behavior in the example given below also.

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <div class="p-30 bg-green-900">
   <div class="col-span-2 py-2 hidden sm:block">
            <div class="flex flex-row gap-3 justify-evenly items-center text-base sm:text-sm xl:text-xl leading-4">
              <li class="list-none text-slate-200 hover:text-white hover:opacity-100 hover:font-bold">
                <Link href="/">Home</Link>
              </li>
              <li class="list-none text-slate-200 hover:text-white hover:opacity-100 hover:font-bold">
                <Link href="/about">About</Link>
              </li>
              <li class="list-none text-slate-200 hover:text-white hover:opacity-100 hover:font-bold">
                <Link href="/projects">Projects</Link>
              </li>
              <li class="list-none text-slate-200 hover:text-white hover:opacity-100 hover:font-bold">
                <Link href="/blogs">Blogs</Link>
              </li>
            </div>
          </div>
  </div>
</body>
</html>

You can refer to this link if code snippet does not work

link here

Upvotes: 1

Views: 1149

Answers (1)

Honey Med
Honey Med

Reputation: 1

Your problem is using the opacity property on the hover event. I advise you to use hover:text-opacity-[] instead of hover:opacity-[] in text nodes. With such a replacement, everything works out perfectly and without twitching the text.

Upvotes: 0

Related Questions