by Craig Hafer on June 25, 2024

Tailwind has a pretty neat way to style children and sibling elements by using what are known as group and peer identifiers. So without further ado, let's jump into how we can use these.

Note: I have omitted some classes in these examples that don't have anything to do with the examples, so that the code you see is only relevant to groups and peers.

• Styling based on the parent element
• Styling based on sibling elements
• Differentiating Identifiers
• Order Matters
• Summary

In order to style something based on it's parent element, we use the group modifier. This is done by simply adding the class group to the parent element.

<div class="group">
  <p>Here is the first child</p>
  <p>Here is the second child</p>
</div>

Here we have a basic, nested HTML element. A parent <div>, containing two children <p> elements. But, as you can see, we added the group class to the parent <div> so that we can style the children based on the parent.

So, let's say we want the parent to get a darker background when it is hovered, but since that would make the text of the children harder to read, we want to change the color of the text of the children. Let's add some group-modifiers onto the children.

<div class="group hover:bg-black">
  <p class="group-hover:text-white">Here is the first child</p>
  <p class="group-hover:text-white">Here is the second child</p>
</div>

Now, whenever we hover over the parent element, we get the desired darker background, with the text still being able to be read.

Regular State

​

Parent Hovered State

This also works for grandchildren elements

<div class="group hover:bg-black">
  <p class="group-hover:text-white">Here is the first child</p>
  <p class="group-hover:text-white">Here is the second child</p>

  <div>
    <p class="group-hover:text-gray-400">Here is the first grandchild</p>
    <p class="group-hover:text-gray-400">Here is the first grandchild</p>
  </div>
</div>

Parent Hovered State w/ Grandchildren

In order to style something based on it's sibling elements, we use the peer modifier. This is done by simply adding the class peer to an element.

<div>
  <div>
    <h1 class="peer text-red-600 font-bold">Red</h1>
    <p class="peer-hover:text-red-500">Apple</p>
    <p class="peer-hover:text-red-500">Fire</p>
  </div>

  <div>
    <h1 class="peer text-green-600 font-bold">Green</h1>
    <p class="peer-hover:text-green-500">Lime</p>
    <p class="peer-hover:text-green-500">Grass</p>
  </div>

  <div>
    <h1 class="peer text-blue-600 font-bold">Blue</h1>
    <p class="peer-hover:text-blue-500">Blueberry</p>
    <p class="peer-hover:text-blue-500">Water</p>
  </div>
</div>

Here we have a few divs side by side, each with their own set of children dealing with different colors. The headers are labeled as peers and each of their <p> siblings are looking for the header to be hovered. When each respective header gets hovered, you end up with the text of the items getting their color to match. Take a look below:

Let's say we wanted to style some siblings, but we didn't want to style ALL of the siblings in every case. Well, we can name our groups and peers specifically, so that we only act on certain ones.

For this example, let's say we have a list of common allergies, and a list of different food items. We can use purely tailwind classes to modify our list as we check off different allergens.

<div>
  <h1>Allergies:</h1>
  <input type="checkbox" class="peer/dairy">
  <span>Dairy</span>

  <input type="checkbox" class="peer/nuts">
  <span>Nuts</span>

  <input type="checkbox" class="peer/gluten">
  <span>Gluten</span>

  <p class="peer-checked/nuts:line-through">Peanut butter</p>
  <p class="peer-checked/dairy:line-through">Cookies with milk</p>
  <p class="peer-checked/nuts:line-through">Cashew butter</p>
  <p class="peer-checked/gluten:line-through peer-checked/dairy:line-through">Pizza</p>
  <p class="peer-checked/nuts:line-through">Almond milk</p>
  <p class="peer-checked/gluten:line-through">Pasta</p>
  <p class="peer-checked/dairy:line-through">Ice cream</p>
  <p class="peer-checked/dairy:line-through">Cheese platter</p>
  <p class="peer-checked/gluten:line-through">Bread</p>
</div>

Note: I purposely omitted many styles from what you are going to see in the screenshot, because it distracted heavily from the important class names

As you can see, using just some basic tailwind, we are able to make a pretty dynamically styled list. Also, it is worth noting that for an item like Pizza that has multiple allergens, you just simply refer to multiple peers for different styles. The options are pretty endless.

One last thing I wanted to mention is that when styling with peers it is important to know that you can only refer to a peer after it appears.

For example:

<p class="peer-hover:text-red-500">Big Brother</p>
<p class="peer">Little Brother</p>

This effectively does nothing. Hovering over the "little brother" will not make the "big brother" turn red.

We learned how to use Tailwind classes to style elements based on their parent or sibling elements. By utilizing the group and peer modifiers, we can create very dynamic interactions with the user. We also learned how to name groups and peers so that we can more specifically utilize these modifiers.

I hope you were able to learn something new.