Parent State Styling

[00:00:00]
>> Steve Kinney: We're doing this in chronological order, right? By chronological order I mean things that existed into older versions of Tailwind first and then we will get to the new hotness and all of them interplay with each other super nicely. But it feels logical to do it when to do it in the order in which they were received into CSS Tailwind.

[00:00:29]
The first interesting one for us is, and this is some Tailwind doing some CSS syntactic sugar on your behalf. Can you do this all in regular css? Of course you can. When we hover over it, I will show you that you probably don't want to. So there is this tailwind class called group.

[00:00:56]
You can put this on any parent element and it does nothing good talk. What it does do is it allows you to then anywhere in there have any of the other ones you saw before hover active focus. Why you use focus within on a group, I don't know.

[00:01:18]
But any of those things, it will allow you to say group any of those variants and to say okay, when it is true for the parent. This is what I want to happen. Right? And so if you wanted to have a card where, hey, don't put any underlines on the link until they hover anywhere over the card and then throw underlines on the entire thing, we'll do it in a second, don't worry.

[00:01:45]
>> Speaker 2: So that lower group hover will refer to the higher group.
>> Steve Kinney: Exactly. Yeah, exactly.
>> Speaker 2: So you could have something that's nested quite deep and say it for whatever reason. It's bold. I want everything bold.
>> Steve Kinney: Yeah, it wouldn't be necessarily bold. It would be like these variants of hover active focus invalid valid the pseudo states.

[00:02:06]
So yeah, as you can see, a border and a background would have done a lot of good in this example, but it didn't occur to me at the moment. So as I can hover over the parent card. We can also. We have cards, we have checkboxes, we have this stuff we can do in Storybook in a second as I hover over the parent, this thing that has group hover.

[00:02:26]
Anything that happens with a group applies to this given one. Right? Well, so here's like, here's a card. I did it. I was like, I should have put one with a border and stuff. Look, next example. I did do that. Go past me. Okay, so we look at this.

[00:02:43]
It's got group. I'm not going to hover over it just yet. I'm not going to run the surprise. We've got group. And here we say on the button Is that, hey, we're learning about CSS transitions right now. It's fine if they hover over the group. I want to make the Buy now button a little bit bigger.

[00:03:05]
Now you can see as we hover over anywhere in the card. You can also see the title changes color because I was getting carried away. And so you can kind of get these cool effects. And we'll look at that in a second. We can do it to one of our cards if we want to.

[00:03:20]
We can do it to the checkbox. We're going to do it to a bunch of stuff over time, but it works for anywhere. Anything that you can basically, on the state of the parent, apply different classes to the children. The other one is, we haven't talked about has yet.

[00:03:37]
So the other one that we have is peer, which is simply the only nuance here. And this is just a CSS thing, is peer is. You can put peer on any given class and it has all the elements, all of its sibling elements after it, not before. It's a limitation of css.

[00:04:00]
So you can say, okay, this label, I don't think that one works. Yeah. So, yeah, so we say that this input is peer. And then you can see that this error message says if any element before this one is invalid, make the text red, right? And so this is the email address.

[00:04:27]
And so you can say automatically, I don't have to like apply a bunch of classes and look at the state and regexit or anything like that. I can simply say, hey, if this input field is invalid, whichever one is marked peer in this case, as you can see, it does not work beforehand though, right?

[00:04:44]
Because ideally, if this worked, you would see the label. It only works for once after. And I will show you there are ways. There are ways. There are ways that only existed not too long ago, though. The last time we did this workshop, there were not ways. Last time we did this workshop, I was playing fast and loose with the ordering and then like Flex reversing them and a whole bunch of.

[00:05:09]
Yeah, that face is appropriate. But like I said before, if there are things that are terrible, eventually they get added to the platform as additional hacks on top of all the other hacks. So we will see how to make both red. If this was invalid, we will get there.

[00:05:23]
But right now, peer works for anything subsequently afterwards, right? Which means that, yeah, prior I would do terrible things like swapping the order of the label. Actually, this one would work, right? I could do something. Let's do it right now. We'll say Peer. And then for the label, I'm going to say class because it just happens to be in this one that the label comes after the input.

[00:05:49]
If you think about our text inputs, the labels came before. This one just happens to work great. So let's do it. We'll say peerchecked. Is this strikethrough? Apparently, off the top of my head, do not remember the class four putting a line through through. You know what, we're just going to make it green.

[00:06:19]
It'll be great. And I will show you my trick for when you forget a class right afterwards, because I'm going to need to use my own trick. So here we'll say we put the pure class on this checkbox and then we'll say if. If you have a older sibling in line order that is checked, then turn the text to Green500 and let's pop over to our storybook.

[00:06:51]
You can now see that when the checkbox is checked, it turns green. But that's not what we want. We want to figure out how to do a strikethrough. So let me show you my trick. You go to tailwindcss.com you hit Command K and you start typing. No, that's for css.

[00:07:21]
There is a way to put a line through stuff in css, right? I definitely have it in one of the examples. I can go find it in a second, but I've forgotten for a moment. But anyway, this, the point stands. Command K on the tailwind docs. You wanna find out all the colors to start taking colors.

[00:07:37]
Here you go. But yeah, so peer will work for any sibling. Comes after group works for any child. And for the longest time, that was all that you had to work with.
>> Speaker 2: Did you try line dash through? For the strikethrough?
>> Steve Kinney: Adding a line through text. Text decoration line through.

[00:08:02]
There it is. Perfect. I kept thinking strike through. Right? Because that's usually, I think what it's doing.
>> Speaker 2: It says strike through a text decoration line through.
>> Steve Kinney: I don't know why. Let's do it. Text decoration line through. This is why you live code with your friends. Hey, there it is.

[00:08:24]
Teamwork. So like I said, prior to Tailwind 4 and Modern, CSS Group and peer were all you had to work with. Right? But there are a few more that we'll take a look at in a second that we can kind of play with as well.