CODEWITHSUNDEEP
csstailwind-css
Chris Wiese
Chris Wiese

Reputation: 19

Inherit Hover state in Tailwind

Its a pretty simple scenario but i can't find an in-framework solution. I have a link with text and an icon. On hover of the link the icon should get another color than the linktext.

<a href="#" class="block text-black hover:text-red"><i class="fa fa-icon text-grey hover:text-blue"></i>

The icon hover only triggers when the mouse is over it not the link as a whole. I know i can still write custom classes in tailwind but this is such a basic problem that I hope someone knows a better solution.

Upvotes: 0

Views: 1786

Answers (1)

doğukan
doğukan

Reputation: 27421

Add group class to link and use group-hover: on the icon.

<script src="https://cdn.tailwindcss.com"></script>

<a href="#" class="block p-6 border group text-black hover:text-red">
  <span class="text-grey group-hover:text-blue-500">icon</span>
</a>

Upvotes: 4

Related Questions