如何解决Tailwind CSS中文字hover加粗时的抖动问题？

我太懂这个烦人的小问题了——鼠标一悬停，文本变粗的同时整个导航跟着抖一下，瞬间破坏了流畅的体验。其实根源很简单：粗体字的宽度比常规字要宽一点点，hover时浏览器会重新计算元素宽度，这就导致了抖动。

下面给你几个适配Tailwind CSS场景的实用解决办法：

方法一：提前预留粗体宽度（最推荐） #

我们可以让导航项在非hover状态下，就提前占据和粗体时一样的宽度，这样hover时宽度不会变化，自然就不会抖了。用伪元素就能轻松实现：

首先在代码里添加自定义Tailwind工具类（可以放在style标签里）：

@layer utilities {
  .preserve-bold-width {
    position: relative;
  }
  .preserve-bold-width::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    font-weight: bold;
  }
}

然后修改你的HTML，给每个导航项的li标签加上preserve-bold-width类和data-text属性：

<li class="list-none text-slate-200 hover:text-white hover:opacity-100 hover:font-bold preserve-bold-width" data-text="Home">
  <Link href="/">Home</Link>
</li>
<li class="list-none text-slate-200 hover:text-white hover:opacity-100 hover:font-bold preserve-bold-width" data-text="About">
  <Link href="/about">About</Link>
</li>
<!-- 其他导航项同理 -->

原理是用一个看不见的粗体文本副本，让父元素的宽度以这个粗体文本为准，hover时真实文本变粗，宽度已经预留好了，完全不会触发布局重排。

方法二：用text-shadow模拟粗体（无宽度变化） #

如果不想折腾占位元素，也可以放弃原生的font-bold，用文本阴影模拟粗体效果，这样文本宽度完全不会改变：

先添加自定义工具类：

@layer utilities {
  .fake-bold {
    text-shadow: 0.5px 0 currentColor, -0.5px 0 currentColor, 0 0.5px currentColor, 0 -0.5px currentColor;
  }
}

然后把HTML里的hover:font-bold换成hover:fake-bold：

<li class="list-none text-slate-200 hover:text-white hover:opacity-100 hover:fake-bold">
  <Link href="/">Home</Link>
</li>

这个方法的好处是零布局变化，缺点是模拟的粗体可能不如原生font-bold自然，但对于导航这类短文本来说完全够用。

方法三：固定导航项宽度（最简单粗暴） #

如果你的导航文本长度都差不多，直接给每个li设置固定宽度就行，比如w-20：

<li class="list-none text-slate-200 hover:text-white hover:opacity-100 hover:font-bold w-20 text-center">
  <Link href="/">Home</Link>
</li>

这个方法上手最快，但灵活性差，要是文本长度差异大，布局会显得不协调。

你可以根据自己的需求选其中一种，亲测都能解决抖动问题~

内容的提问来源于stack exchange，提问作者MagnusEffect