@vueuse/motion not supports with tailwindcss

[phichayut-pak]

I'm using tailwindcss with @vueuse/motion. After I put v-motion in my html tags, I see that my hover transition from tailwindcss doesn't work anymore. I use hover from tailwindcss because whenever I use :hovered from @vueuse/motion and let it scales up on hover, it just stucks there. Even though I already bring my mouse out of it, it still scales up. However, others like tapped or focused didn't work with tailwindcss too. If there is a way that :hovered, :focused, :tapped can scale back to the same scale, which is 1, please feel free to advise me. The code below is what I've been working on. (btw, my :leave doesn't work when I click to change transition too)

  <div class="flex justify-center items-center border h-screen w-screen">
    <div id="start" class="flex flex-col justify-center items-center" >
      <h1 class="font-bold font-['Poppins'] text-5xl ">Math Quiz</h1>
      <button class="bg-green-300 my-16 py-5 px-16 font-semibold rounded-full"
      v-motion
      :initial="{ opacity:0 , x: -100, scale: 1 }"
      :enter="{ opacity: 1, x: 0 }"
      :delay="300"
      :hovered="{ scale: 1.25 }"
      >START</button>
    </div>
  </div>
</template>```

[phichayut-pak]

I moved everything in this to vue 3, and I got it now