Change Styles on Multiple Elements with Tailwinds group-hover
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.
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.....
i think it must just be me and my iPad, because it works fine on my phone....weird.....
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.
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.
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?
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.
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