如何在 nuxt.js 中申请 TailwindCss 活动样式？

Question

最近我尝试使用 Vuetify.js 中的 tailwindCss 作为 Nuxt.js UI 框架。 我真的做了一个像按钮这样的简单示例，但它不是我预期的工作。 我想添加“活动”实用程序，但没有用。

我关注了that. 所以首先，我像这样添加了tailwind.config.js。

tailwind.config.js

module.exports = {
 variants: {
    extend: {
      backgroundColor: ['active'],
    },
  },
}

我制作了如下所示的小按钮示例。

<button
      class="
        active:bg-green-700
        bg-green-500
        rounded
        font-bold
        py-3
        px-5
        text-white
      "
    >
      ButtonTest
    </button>

我运行了这些代码，按钮从未激活。 是否需要使用其他设置？ 有没有人给我建议？