Group with focus-within

[DasdWaller]

I try to understand how works and compile the 'group' and 'group-*' class. Any Information or help?

[Updated]

Hey, Simon :D Thanks for the reply.

Sorry, the wording of my thought was incorrect and sorry for waste of your time. I wanted to know about the workflow of group under the hood but the real thoughts its about focus-within... To keep it brief, is possible to make something like group-hover to focus-within. The 'focus-within' it will be more useful with grouping selectors. But I don't know if is feature good or not... That's why I was looking for group class to understand the code under the hood and come to a conclusion if my thoughts was wrong.
If you want I can provide a code examples about the use case.

Simon I'm waiting more videos on youtube.

[simonswiss]

Hello!

You can find information about group (used for things like group-hover or group-focus) here:

https://tailwindcss.com/docs/hover-focus-and-other-states#group-hover

Here's a Tailwind Play example with a card that, when hoevered, changes the color of the text inside of it (within the group):

https://play.tailwindcss.com/B6xL6swOsm

The way it works with with a nested selector .group:hover .group-hover\:text-white.

When you use the class group-hover:text-white on an element that has a parent with the group class, this selector above will be matched and the element will change the text color to white when the parent with the group class is hovered.

Hope it helps!

[simonswiss]

Answering the [Updated] question:

the group class is used as a toggle on the parent element, so you can apply styles to the children.

With focus-within, it's somewhat the opposite. It's an opportunity to apply styles to the parent when something happens to the children (enters in focus).

Does it make sense?

To understand how the code works, you must understand how fundamentally different group and focus-within are. Perhaps you intend to use group-focus?

[DasdWaller]

As you write focus-within is opposite of group and style the parent but what about to style parent and childs with focus-within. check the Example. I try to make a "new feature" my thought is between group and focus-within.
The goal of Tailwind is to utilize the CSS but a lot of stuff missing.

[DasdWaller]

we can set a (supposed) group-within on parent and we use focus-within with childs.

<div class="group-within ..."> <---- we can use  focus-within:*
  <p class="focus-within:text-gray-900 ...">New Project</p>
  <input type="text"/>
</div>

<div class="group-within ..."> <---- we can use  group-focus-within:*
  <p class="group-focus-within:text-gray-900 ...">New Project</p>
  <input type="text"/>
</div>