Changing Text Colour On Hover

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

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

2 Likes