Nuxt 2 | TailwindCSS 3: Override component css

I cant override my base button css in my hover button

BaseButton.vue

<template>
  <button :class="$style.button" v-on="$listeners">
    <slot />
  </button>
</template>

<style module>
.button {
  @apply min-w-[200px] rounded-[2px] h-[53px] font-round font-medium bg-[#412F36] text-white outline-none;
}
</style>

ButtonHover.vue

<template>
  <BaseButton class="border border-[#412F36] bg-transparent hover:bg-[#412F36] transition duration-300 text-black hover:text-white">
    <slot />
  </BaseButton>
</template>