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

Question

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

我跟着那个。 所以首先，我像这样添加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>

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

标签： javascriptvue.jsnuxt.jstailwind-csspostcss