# Using Group modifies in Tailwind and Elements

**URL:** <https://forums.realmacsoftware.com/t/using-group-modifies-in-tailwind-and-elements/48347>\
**Category:** Elements\
**Created:** [June 25, 2025, 10:42am UTC](https://forums.realmacsoftware.com/t/using-group-modifies-in-tailwind-and-elements/48347 "2025-06-25T10:42:05Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [June 25, 2025, 10:42am UTC](https://forums.realmacsoftware.com/t/using-group-modifies-in-tailwind-and-elements/48347/1 "2025-06-25T10:42:05Z")

</div>

@elementsbot Can you please explain how group modifies work in Tailwind? and how I might put them in the CSS Classes box in the Advanced setting of a Component?

Asking this here as you didn’t seem to want to respond in the [original thread here](https://forums.realmacsoftware.com/t/changing-text-colour-on-hover/48304/5).

---

<div class="post-metadata">

**Author:** ![elementsbot](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/elementsbot/32/33134_2.png) [@elementsbot](https://forums.realmacsoftware.com/u/elementsbot)\
**Post date:** [June 25, 2025, 10:42am UTC](https://forums.realmacsoftware.com/t/using-group-modifies-in-tailwind-and-elements/48347/2 "2025-06-25T10:42:26Z")

</div>

Absolutely, Dan! Let’s break down how group modifiers work in Tailwind CSS — and how you can use them inside Elements via the CSS Classes (Advanced) box.

* * *

## 🏷 What Are Group Modifiers in Tailwind?

Group modifiers in Tailwind allow you to style child elements based on the state of a parent. The classic example is making a child change style when you hover the parent — very handy!

**How it works:**

1. Add the `group` class to the parent element.
2. In the child, use `group-<modifier>:<utility>` to trigger a utility when the parent is in a certain state (e.g. hovered).

### Example — Change Child Text Color When Parent Is Hovered

```html
<div class="group p-4 bg-surface cursor-pointer">
  <h2 class="group-hover:text-brand transition">
    Hover me!
  </h2>
</div>

```

- `group` on the parent enables “group context.”
- `group-hover:text-brand` on the child means: turn the text to the theme’s Brand color when the parent is hovered.

* * *

## 🛠 Using Group Modifiers in Elements

You can use group modifiers in the “CSS Classes” field in the Advanced tab of a component’s inspector. This is where you’d drop your Tailwind classes.

**What to do:**

- Add `group` to your parent component’s CSS Classes (Advanced).
- On the child component (could be text, button, etc), in its CSS Classes, add `group-hover:your-utility` (e.g., `group-hover:text-brand`).

**Bonus:** You can use _any_ Tailwind utility (colors, borders, opacity, etc) with group modifiers!

* * *

## **Quick Example in Elements**

1. **Parent “Box” Component**
  - Go to Advanced → CSS Classes
  - Add: `group bg-surface p-6 rounded`

2. **Child “Text” Component (inside above)**
  - Advanced → CSS Classes
  - Add: `group-hover:text-brand transition`

When you preview: Hover over the parent box, and the text color changes to match your site’s “Brand” color — theme-consistent, flexible, and clean. That’s the Power of Elements!

* * *

**Extra Tips:**

- You can chain group modifiers for responsive or state-specific effects (like `group-focus:`, `group-active:`).
- It’s fully WYSIWYG — no code editor required.

If you want a step-by-step or a sample .json properties file layout, just @elementsbot again!

Let me know if you want a full working example project or more advanced tricks!