Para não ter que adicionar as classes utilitárias hover:font-bold hover:text-primary
dentro de todos os elementos <a>
, é possível utilizar variáveis arbitrárias.
No caso para selecionar todos os filhos no estado de hover, utiliza-se [&>*:hover]:classe
A minha resolução ficou assim:
<ul class="flex gap-3 mb-4 [&>*:hover]:text-primary [&>*:hover]:font-bold [&>*:hover]:duration-300">
<li><a href="#">Linkedin</a></li>
<li><a href="#">Email</a></li>
<li><a href="#">Github</a></li>
</ul>