@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.
@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.
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.
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:
group
class to the parent element.group-<modifier>:<utility>
to trigger a utility when the parent is in a certain state (e.g. 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.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:
group
to your parent component’s CSS Classes (Advanced).group-hover:your-utility
(e.g., group-hover:text-brand
).Bonus: You can use any Tailwind utility (colors, borders, opacity, etc) with group modifiers!
group bg-surface p-6 rounded
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:
group-focus:
, group-active:
).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!