How to use "group-hover" when composing utility classes with @apply ?

[HanoonIH]

I'm creating a card component by composing many utility classes using @apply.
I understand that I can make a component hover/active/focus effects using .card:hover , .card:active , .card:focus this way.
but how can I give a component, group and group-hover utilities...?
I tried .card:group-hover , but it isn't working.
Pls, help me.
@adamwathan @jackmcdade @r00k @philippbosch @davidhemphill

[philippbosch]

It would help if you gave more details about what you’re trying to achieve. Generally I would say .group/.group-hover are not needed in components but maybe I‘m missing something.

Without components/@apply you would do something like this to e.g. highlight one child element when the user hovers over the card:

<div class="bg-white border rounded group">
  <div class="font-bold text-teal-800 group-hover:text-red-500">Adam Wathan</div>
  <div class="text-teal-500">Tailwind Labs</div>
  <div class="text-gray-500">CEO</div>
</div>  

With a component, you would have something like this:

<div class="card">
  <div class="card__name">Adam Wathan</div>
  <div class="card__company">Tailwind Labs</div>
  <div class="card__title">CEO</div>
</div>

and could achieve the same effect in your CSS:

.card {
    @apply bg-white border rounded;
}

// …

.card:hover .card__name {
    @apply text-red-500;
}

Hope this helps.

[philippbosch]

@HanoonIH please either mark this as answered or provide more details