How to make Vue Router add 'link-exact-active-class' at the end of class list?

Question

I tried using the linkExactActiveClass parameter in the router constructor to highlight active links in the navigation bar.

My problem is that the active class is added to the beginning of the css class list, which means other classes override it.

This is my router configuration:

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

router-link The elements look like this:

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

question:

text-yellow-500 classes are indeed added before existing css classes. This causes the yellow text to be overwritten by the text-white class. How can I change this?

Answer 1

A simple solution is to use tailwind (documentation) in the class

Try using it like this:

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

Normally, I don't like this approach, but I don't think there is any other easy option

PS: Make sure you are using at least tailwind 2.1 and JIT mode