如何在Nuxt.js中使用Tailwind突出显示导航栏上的活动部分？

npm install tailwindcss vue-router

module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};

.active-link {
  font-weight: bold;
  color: #ff0000;
}

<template>
  <nav>
    <router-link to="/" exact>
      <a class="nav-link" :class="{ 'active-link': $route.path === '/' }">Home</a>
    </router-link>
    <router-link to="/about">
      <a class="nav-link" :class="{ 'active-link': $route.path === '/about' }">About</a>
    </router-link>
    <router-link to="/contact">
      <a class="nav-link" :class="{ 'active-link': $route.path === '/contact' }">Contact</a>
    </router-link>
  </nav>
</template>

export default {
  // ...
  css: [
    '~/assets/css/tailwind.css',
  ],
  // ...
};

npm run dev