Custom hover not working

[feelixe]

I'm using @nuxtjs/tailwindcss which is using tailwindcss 1.9.6.
I've defined some custom color classes in tailwind.config.js.
An the code below is from my tailwind.css
I'm excpecting elements with class btn-red to be transparent and have background:red; on hover. But those elements have background red all the time.

I've tried moving @variants hover to outside of @layer base, because I was unsure where it should be placed, but neither worked.

Is this because some feature is not in 1.9.6 or did I do something wrong?
Any help appreciated!

index.vue
<a class="btn btn-red mt-3">Text here</a>
tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body{
    @apply text-tingray-700 text-lg;
  }
  h1 {
    @apply text-6xl font-bold text-tinblue-800;
  }
  h2 {
    @apply text-4xl font-bold text-tinblue-700;
  }
  h3 {
    @apply text-3xl font-bold text-tinblue-600;
  }
  h4 {
    @apply text-2xl font-bold text-tinblue-600;
  }
  .h-hero{
    font-size: 4.5rem;
  }
  .card{
    @apply p-16;
  }
  .btn{
    @apply border px-8 py-3 rounded-full font-bold text-sm inline-block;
  }
  .btn-red{
    @apply border-tinred-500 text-tinred-700;
  }
  .btn-green{
    @apply border-tingreen-500 text-tingreen-700;
  }
  .btn-blue{
    @apply border-tinblue-500 text-tinblue-700;
  }
  @variants hover {
    .btn-red{
      background: red;
    }
  }
}

[hugovntr]

Hello,

You could use regular css to do that

/* Your code */
.btn-red:hover {
    background-color: theme("colors.red.400"); /* using the theme helper */
}

AFAIK @variant hover only works if you add the hover prefix, so in your case

<a class="btn hover:btn-red mt-3">Text here</a>

I made a Tailwind playground project so you can see if that fits your needs.