I tried using thelinkExactActiveClassparameter 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.
const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes, linkExactActiveClass: 'text-yellow-500', });
router-linkThe elements look like this:text-yellow-500classes are indeed added before existing css classes. This causes the yellow text to be overwritten by thetext-whiteclass. How can I change this?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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 andJITmode