Tailwind Time: Groups

It is easy to style an element depending on its parent state like hover, focus, etc. in CSS or SCSS. You will end up something like this:

.parentContainer {
  // ...
  &:hover {
    .childContainer {
      background: black;
      cursor: pointer;
      // ...
    }
  }
}

Since Tailwind's strength is comes from its single responsibility utility classes, how to achieve same result in Tailwind?

It's super easy with group class! When styling an element based on the state of a parent element, mark the parent with the group class and utilize group-* modifiers such as group-hover to style the desired element.

<div class="flex items-center space-x-3">
    <span class="h-6 w-6 group-hover:outline""><!-- ... --></span>
    <h3 class="text-black group-hover:text-white text-sm">hello</h3>
</div>

This approach works seamlessly with every pseudo-class modifier, such as group-focus, group-active, or even group-odd.

Distinguishing nested groups

When nesting groups, you have the ability to style elements based on the state of a particular parent group by assigning a unique group name to that parent using a group/{name} class. Subsequently, you can include that name in modifiers using classes like group-hover/{name}.

<ul role="list">
  {#each people as person}
    <li class="group/item hover:bg-slate-100 ...">
      <img src="{person.imageUrl}" alt="" />
      <div>
        <a href="{person.url}">{person.name}</a>
        <p>{person.title}</p>
      </div>
      <a class="group/edit invisible hover:bg-slate-200 group-hover/item:visible ..." href="tel:{person.phone}">
        <span class="group-hover/edit:text-gray-700 ...">Call</span>
        <svg class="group-hover/edit:translate-x-0.5 group-hover/edit:text-slate-500 ...">
          <!-- ... -->
        </svg>
      </a>
    </li>
  {/each}
</ul>

In above example, there are two unique groups: group/item and group/edit.

When you hover over group/item which is <li> element, the Call CTA inside <a> tag becomes visible thanks to group-hover/item:visible command.

Also when you hover over group/edit, Call text is getting a different color with group-hover/edit:text-gray-700 and svg icon is updated with some translate functionality with group-hover/edit:translate-x-0.5 and its text color is also updated with group-hover/edit:text-slate-500.

Groups can be named however you want and there's no need for any additional configuration. Simply name your groups directly in your markup, and Tailwind will automatically generate the required CSS.

Arbitrary groups

You have the flexibility to create custom group-* modifiers dynamically by specifying your own selector as an arbitrary value enclosed within square brackets:

<div class="group is-published">
  <div class="hidden group-[.is-published]:block">
    Published
  </div>
</div>

For more control, you can use the & character to indicate where .group should positioned in the final selector relative to the selector you are providing:

<div class="group">
  <div class="group-[:nth-of-type(3)_&]:block">
    <!-- ... -->
  </div>
</div>

Recap

I love CSS-in-JS solutions and Tailwind is my favorite in this manner. There is so much to achieve with Tailwind with little effort. Today I want to show you:

• Styling a child element according to its parent element with the group class keyword is super easy
• You can use multiple unique groups/{arbitrary_name} to achieve distinguished style effects.
• Even class names are used within brackets to form a unique group.

Sources:

TailwindCSS

Thank you for reading this far. See you in the next chapter :)