CODEWITHSUNDEEP
csshovertailwind-css
Madriesen
Madriesen

Reputation: 619

Tailwindcss group-hover not working on border color

When I hover over a navigation item, I want a span border color to be changed. The group-hover does nothing...

Is this just not implemented in Tailwindcss yet?

 <a class="group px-4 py-2 hover:bg-white
            hover:text-primary transition-colors duration-300
            rounded-sm"
     :href="route">
    <span class="pb-1 border-b border-white group-hover:border-black">
        <slot/>
    </span>
  </a>

I obviously can do this by writing css like this, but tailwind should be able to do this, right?

a:hover span {
  border-color: black;
}

Upvotes: 8

Views: 17137

Answers (1)

Zargham Khan
Zargham Khan

Reputation: 284

you need to enable group-hover in tailwind config file.

You can control whether group-hover variants are enabled for a utility in the variants section of your tailwind.config.js file:

module.exports = {
    variants: {
textColor: ['responsive', 'hover', 'focus', 'group-hover'],
 },
}

Upvotes: 14

Related Questions