Variants hover not applying in TailwindCss

Question

I have a custom class set-up, I'm trying to add variants but seems the behaviour doesn't change from classic CSS.

@layer components {
    @variants hover, focus {
        .btn-primary {
            background-color:blue;
            
        }
    }

    .btn-primary{
        @apply bg-primary rounded-sm border-4 border-primary rounded-sm text-white text-base py-2 px-4 capitalize transition-all;
        
    }
}

If the variants is after the .btn-primary, then it applies the blue background like it's nothing. Hover nor focus work.

Here what I've add in my tailwind config based on other posts I've seen :

variants: {
    extend: {
        backgroundColor: ['hover'],
    }
}

juliomalves juliomalves · Accepted Answer · 2021-02-21T00:27:33

You can simply use the hover: and focus: prefixes directly in your .btn-primary definition.

.btn-primary {
    @apply bg-primary hover:bg-blue-700 focus:bg-blue-700 rounded-sm border-4 text-white text-base py-2 px-4 capitalize transition-all;  
}

You also don't need to add the hover and focus variants to the backgroundColor property in the config as it's already enabled by default.

Variants hover not applying in TailwindCss

1 Answers