Group Modifiers Exercise

[00:00:00]
>> All right, so your job is, I got this really obnoxious version of the kind of alert that we made before. And like I was showing before, there might be much more subtle ones that you might have a bunch of cards and a carousel or something like that, that you want some number of changes to happen.

[00:00:18]
I decided that taste wasn't in my interest at this moment, that I wanted the most egregious thing I could come up with at the time. So yeah, we want something kind of extreme here where the button changes and everything as well. So you can grab this one down here.

[00:00:35]
There's a solution hiding with one of those detail summary, things I was telling you about before. And you're gonna go take it for a spin, take about five minutes, and then we'll kinda just very quickly look at it together. And then if there are interesting ideas somebody has on dumb things that we could do, I'm here for it.

[00:00:54]
Let's do the actual test get hand first, which is just to kinda use the group. And if you had ideas for how to also put a peer in here, I'm here for it as well. And so what we can do is we're gonna say that the group is this top one right here.

[00:01:10]
And I could also give that one its own hover, right? Separate from everything else. And I haven't talked about gradients yet. But since we already had a fun bonus gradient in the beginning, I now feel like it is fair game for me to use gradient, so I'm going to.

[00:01:30]
So I'm gonna say bg-gradient. Which ones of these make me happy? Let's do to-top right. What could possibly go wrong? So we'll say, top right and we'll say from-purple-400 to-purple-100, love it. Okay, that doesn't look too bad. That was pretty good, I'm into it. And so then what we wanna do is, okay, we wanna also change the border while we're at it.

[00:02:10]
So we'll say hover:border. I want a nice darker border too. Okay, great. This button now, this button we're gonna change that as well. Forget what else was in the other one that we wanted to change, but I think we wanna change some of the font colors here. So it's tricky cuz I didn't pick a dark enough color to justify that, so let's actually make this 800.

[00:02:37]
So that I really need to, right? There's no contrast there. So we'll make this 600 or 800. And now we've gotta do some things here. So, yeah, I can basically, for whatever I wanna change here as well, I can do that. I'm gonna do slightly different things than was in the solution that's there cause you can look at that solution too.

[00:02:59]
So here I could say, this one is using a border of the current and the hover is purple-300, and that changes there. But I wanna change that background there. Cool, so let's do that, we'll say, group-hover. And I don't wanna give it, I'm gonna say, I'm gonna try to redeem myself here where we'll do a purple.

[00:03:30]
It's kinda dark, I think 400, and we're gonna give it that slash to make it a little bit, give us some opacity. Now that we already got that cool gradient in the background, which probably isn't enough at that point to do it, but we're here for it. So group-hover, I'm gonna make that a little bit lighter.

[00:03:53]
And we can change stuff like the text as well. You get the basic idea, so you can have stuff that's now, like you're not doing a bunch of JavaScript, you're not adding classes all over the place. You're not hoping the cascade works in your favor and all of those things, you can kind of have a little bit more control over these things.

[00:04:10]
There's nothing wrong with the cascade, the cascade works, as we could see. But generally speaking, then you get into specificity issues when those child classes have their own colors that are technically more specific than the cascade. And next thing you know, you've lost an afternoon, right? And so with Tailwind, we don't have to lose an afternoon.

[00:04:29]
We'll say text is, we can move on with our lives and go back to doing really cool stuff.