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="#" ><i ></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.

CodePudding user response：

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

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

<a href="#" >
  <span >icon</span>
</a>