Change Styles on Multiple Elements with Tailwinds group-hover

Share this video with your friends

Send Tweet
Published 5 years ago
Updated 3 years ago

Sometimes, you want to update styles for multiple children elements when hovering over a parent. The group-hover class in Tailwind lets you do just that in a very elegant way!

Instructor: [00:00] Here's a simple UI card. It looks nice and all, but we want the background to go purple on hover. As you can see, the text becomes unreadable. How do you tackle this problem with utility classes? We could add a hover text white class on both the headline and the paragraph, but that's not really what we want.

[00:18] Tailwind offers a group hover utility class for this scenario. You give the parent element a class of group. Then, each child element that needs to react to the parent hover state gets a group hover prefix class. Check it out. Now, all update when the parent element, the one with the group class, is hovered.

Aj
Aj
~ 4 years ago

took me awhile to figure out that group-hover isn't included in your config by default and needs to be added.

https://tailwindcss.com/docs/configuration/#modules

Colin Maroney
Colin Maroney
~ 4 years ago

is it just me, or is lesson 5 somehow weirdly broken on mobile? I can't view it in either safari or chrome on my iPad, I get a white browser-based error screen that says something is wrong with the connection. I was able to view 1-4 just fine.....

Colin Maroney
Colin Maroney
~ 4 years ago

i think it must just be me and my iPad, because it works fine on my phone....weird.....

Cory Kleiser
Cory Kleiser
~ 4 years ago

took me awhile to figure out that group-hover isn't included in your config by default and needs to be added.

https://tailwindcss.com/docs/configuration/#modules

Thanks for the comment, I feel like this should have been explained before this video. You need to include focus to follow the previous video as well.

Kaleb Davenport
Kaleb Davenport
~ 4 years ago

Yes, is there an introduction course before this tailwind course? I paid for egghead just for a tailwind tutorial, and I feel that it is weirdly incomplete. If there is a previous course and someone could respond with a link that would be great.

Cory Kleiser
Cory Kleiser
~ 4 years ago

Yes, is there an introduction course before this tailwind course? I paid for egghead just for a tailwind tutorial, and I feel that it is weirdly incomplete. If there is a previous course and someone could respond with a link that would be great.

Incomplete how?

Kaleb Davenport
Kaleb Davenport
~ 4 years ago

I have used bootstrap before, and I am intermediate with CSS, but the course seems very focused on describing features. I am not entirely familiar with the egghead interface so that may be the problem, but it seems to me that the course lacks a certain amount of practical application. I feel that it is important to know when to use certain strategies, especially in a beginner course. On the same note of being a beginner course, the videos have configuration changes between each video that I have been confused about how to achieve the same effect. The material is great, I just feel like the flow from lesson to lesson assumes the user has quite a bit of experience navigating CSS and frameworks as well as the know-how of when to apply certain features of tailwind.