Using Group modifies in Tailwind and Elements

Elements How do I…
1

@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.

2

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.

:label: 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

<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.

:hammer_and_wrench: 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!