# Changing Text Colour On Hover

**URL:** <https://forums.realmacsoftware.com/t/changing-text-colour-on-hover/48304>\
**Category:** Elements\
**Created:** [June 24, 2025, 2:26pm UTC](https://forums.realmacsoftware.com/t/changing-text-colour-on-hover/48304 "2025-06-24T14:26:27Z")\
**Posts on this page:** 1\
**Showing post:** 5

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [June 25, 2025, 10:27am UTC](https://forums.realmacsoftware.com/t/changing-text-colour-on-hover/48304/5 "2025-06-25T10:27:52Z")

</div>

Hi @BrettHannam

As @handshaper says, there is no built in way to do this at the moment. However, you can use a couple of tailwind classes on the Text component to achieve this.

I’ve created an [example project, which you can open in Elements](elementsapp://downloadDocument/MYrd758utjyo)  
. In the project I’m using a Flex with an SVG and Text inside.

The tailwind classes are: `group-hover/flex:text-green-700 transition-colors duration-500`

 ![CleanShot 2025-06-25 at 12.22.40@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/a/e/aeb8a8f7a16bbfc03006b2c6ffa5b0040a606e19.png)

The magic is in the `group-hover/flex` modifier. Every built in component has a named “group” class applied, so you can target it in this way. If you’re not sure how this works, we can get @elementsbot to explain how group modifies in Tailwind works 🙂

---

_[View the full topic](https://forums.realmacsoftware.com/t/changing-text-colour-on-hover/48304)._