我怎样才能让 Vue Router 在类列表的末尾附加 'link-exact-active-class'？

Question

我试图通过使用路由器构造器中的 linkExactActiveClass 参数在我的导航栏中突出显示活动的 link。
我的问题是活动 class 被添加到 css class 列表的开头，这意味着其他 classes 会覆盖它。

这是我的路由器配置：

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
  linkExactActiveClass: 'text-yellow-500',
});

router-link 元素如下所示：

<li>
    <router-link class="px-2 text-white" to="/manage">Manage</router-link>
</li>

问题：

text-yellow-500 class 确实在已经存在的 css class 之前添加。这导致黄色文本被 text-white class 覆盖。我该如何更改？

Answer 1

一个简单的解决方法是使用 tailwind (docs) 的 built-in 重要修饰符 在您的 class 中添加 !

尝试这样使用：

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
  linkExactActiveClass: '!text-yellow-500',
});

通常，我不喜欢这种方法，但我认为没有其他简单的选择

PS：确保您至少在 JIT 模式下使用 tailwind 2.1