Tailwind active does not change background color

Question

I have a problem with my button here:

<template>
  <button
    class="active:scale-95 transform bg-blue-500 text-center transition sm:hover:bg-blue-600 active:bg-blue-700 text-white font-bold py-2 px-4 rounded"
    :class="{ disabled }"
    type="button"
  >
    <div class="p-1 w-full justify-evenly flex">
      <slot></slot>
      <div v-if="loading" class="lds-facebook">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
  </button>
</template>

As you can see in the example, my button has active:bg-blue-700 so my expectation is that whenever i click or click and hold the button, the background of my button changes. But it actually does nothing. Even the active:scale-95 worked. I also tried by removing active:scale-95, doesnt worked. I tried to add a variant in my config:

   variants: {
    extend: {
      scale: ['active'],
      background: ['active'],
    },
  },

Also no chance.

What am i doing wrong?

I use version @nuxtjs/tailwindcss 4.2.1

Answer 1

Well the issue was following: The variant name was wrong, change this

  background: ['active']

to this:

  backgroundColor: ['active']