tailwindCssにおいてactive要素の追加ができない。

Question

普段、Nuxt.jsを用いてwebアプリケーションを構築しているのですが、
顧客から要望が多くなってきたため、これまで使用していたUI frameworkであるVuetify.jsからtailwindCssへ変更しようと検討しておりました。

まずは簡単なサンプルを作成し、使い方の習熟を図ろうと思い、ボタンを作成しました。
ボタンがactiveとなったときにボタンのバックグランドカラーを変更すよう、
コードを作成しましたが、activeとはならず、当然バックグラウンドカラーとして設定していた色も反映されることはありませんでした。

コードは下記の手順で追加しています。

まず、active要素はtailwindCssの場合はオプショナルのようなので、tailwind.config.jsにて
下記のように追加しました。

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

次にvueファイルにて下記のようにボタンを作成しました。

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

どうすれば、tailwind.config.jsで拡張した'active'要素が反映されるのか分からず、困っております。
どなたかお詳しい方、ご教示いただけませんでしょうか。