Peer Modifiers

[00:00:00]
>> So I want to then show you, I think, where this also gets very, very powerful, which are some of these modifiers here, right, which look like variants as well. But they kind of like work in tandem. So you've got these two utility classes, one called peer and one called group, right?

[00:00:19]
And they behave roughly the same way. I have two sections cuz that's just how writing works. But I'm gonna kinda like talk about them a little bit. We'll look at them each individually. But you can give a given element peer or group, and then you get a set of variants for other elements nearby, right?

[00:00:37]
So to kind of show you a little bit how this works is like I'm gonna open this up so you can kind of see what's going on in the HTML. Which let's give ourselves a little bit of space in here. There we go. Sub read the label from everything else, which is I've got this p class here, which is technically out of the box, invisible, right?

[00:01:07]
Invisible is different than hidden. The difference is that invisible still takes up the same amount of space, hidden collapses. So if you don't want your form jumping up and down constantly, right? It's still taking up the same height it would take if it was visible. Hidden will literally won't remove it from the DOM, but as far as you're concerned, it will remove it from the DOM in terms of your layout.

[00:01:29]
So invisible just has to take up the same space. And you can say that with this input field, I have like mentioned that it has a peer. Right, like, I'm looking for it in here. There it is. It's the very first one, peer, right? And that's just saying that this one can now use a variant, which is saying peer invalid, right?

[00:01:51]
So now whether or not this paragraph is invalid, whether or not the input field is invalid, right? And if so, since this is for an email address, then I can show the error message in pure CSS, no JavaScript needed, just technically the DOM, not just CSS, like a little, that meme of the two arms doing the handshake.

[00:02:18]
But yeah, so if you're working on it, so on and so forth, but you can have these custom error messages in there. And I have it like, we call it invalid when we're no longer focused on it in this case. But that's up here. Now one important note is that kind of sort of asterisks like disclaimer, you can only do future siblings, right?

[00:02:43]
And so you'll notice if I do, for instance, peer invalid, bg-red, not 300 this time, doing 500. It doesn't matter. We'll never see it. You'll notice that this class does not work. That's not a Tailwind thing. That is a CSS thing, right? You can only theoretically go forward and like I said, it is slightly true.

[00:03:18]
There is a way to do it. It is kind of the preamble I gave right before we kind of get grabbed into the section. Is there a way to do it, yes. Is there a fully supported way to do it across all the browsers? Presently, no. It's one of those things which is like, wait a while, and you will be able to.

[00:03:36]
At this moment, you can't. So generally speaking, and it's kind of annoying, because like, for the invalid, I don't really care. I would love a world where for a required field I could show a little dot or something when we get to before and afters. Pseudo selectors. I can do all of that.

[00:03:55]
And so theoretically out of the box right now I can't. A lot of the times the way that I do this is like JavaScript, right? But let's talk about the future syntax that we could theoretically use in the future and just to kind of like wet our appetites for when it's more widely supported.

[00:04:17]
And to show, right, it is presently it looks like Firefox is the holdout here. We were all expecting a certain browser made by Apple to be the one in this case. But it looks like at this point even those green flags are like, it is in a future build of Firefox, right?

[00:04:44]
Do you all know what Opera Mini is? That's the one that takes a picture of the webpage and sends it to your phone. So that will never have anything ever. And like this, as we get down this list, I care less and less and less, but it looks like this is some syntax in IE 11.

[00:04:58]
I don't. But it looks like this will be some syntax that we get at some point, right in the future but not just yet. And could you through some concoction of post-CSS to transpile it. And I don't know that you can, because something's you can't transpile. And a tailwind plugin, could you support it?

[00:05:23]
Maybe, not gonna talk about what I plan on doing this weekend. But let's just talk about how the CSS would work in this case as a little like exploration. And then we will kind of like understand that right now we can't, okay? So and this is where stuff like plugins or stuff like utility methods, you might cuz like the CSS or work in Chrome.

[00:05:49]
If you can figure out a progressive enhancement strategy that works for you. And for instance, if it's just turning the label dark red when it's invalid, that might be an okay reason. Your users aren't losing anything if that doesn't work. They're just things you need to like, I can't tell you, you should totally do it.

[00:06:09]
It is more of a like you can consider whether or not you want to do it. And so we have the has operator, right? And so you could theoretically end up with CSS like. I was just writing the raw CSS. But you do something like take the label and then Has has this like a query selector where you can kind of like use it.

[00:06:34]
So Has and then. What we can say is and then it has an input that is required. I don't know what we would make that look in the tailwind syntax, but it's saying, is after this there is immediately an input that is technically required. Or let's do invalid in this case.

[00:06:59]
We can do that and we'll say Give me like a, yeah, that kind of read. And so theoretically, you can see that it does work in Chrome. If you're trying this in Firefox, you're like, it doesn't work for me. We saw that it doesn't work and depending on what version you have of something right now, if it doesn't work for you that's possibly like very okay.

[00:07:27]
And that is part of the story in this case. But those are some of the things like some of the limitations are not necessarily tailwind limitations, right? And this kind of goes to our previous point of how much CSS do I need to know to use Tailwind. It is just CSS at the end of the day.

[00:07:43]
It's not doing any kind of magic beyond that. It's simply a set of helpers and utilities for CSS. But the ability to set up those peers like that super easily is really powerful as well. And another really nice use case for that is, actually I think this is for you.

[00:08:08]
This is another example where, yes, I picked the most ridiculous strikethrough on purpose because sometimes I'm allowed to have fun too. And so we'll kind of look at this one real quick, but it's again, like the various places where you can use this. Because who doesn't like to make a to do list app, right?

[00:08:26]
I say as somebody who does it several times a year standing at this podium. So here it's like, again, this also shows another selector in this case. So we say the checkbox is the peer. And then this label comes afterwards. I'm like, this label. So theoretically, this one can use peer checked and gets the line through.

[00:08:46]
And this is again, really an excuse for me to show you a few more of the little friendly utility classes that you get with this, decoration, purple, decoration force, how thick you want it to be like the width of it and decoration wavy. Honestly, autocomplete showed me wavy when I was preparing this I'm like I can't not pick wavy, right?

[00:09:04]
I have to work on a real thing like customers used or my day to day lives like if I get to do one of these workshops and I see wavy is an option, I'm picking it. Do you have a question?
>> Is there like a scope to peer and is it like, can you have multiple on a page?

[00:09:17]
>> You can have multiple, so that's a really great question. You can have multiple on a page. This peer, for instance, it's just gonna be our default peer, right? But let's say. This will be a little bit contrived because we'll make these all peers, right? And so theoretically, this should break in the way that I expect as I live code, which is they should both get the wavy, right?

[00:09:45]
That's not what I want. And so could I go out of my way and wrap them both in divs? I absolutely could. But Tailwind doesn't want me have to do like squirrely stuff just to make CSS work. That's the whole value prop is I shouldn't have to wrap stuff in divs just to make CSS work.

[00:10:05]
I should get to just define some amount of scoping so check it out. We can do peer and we can go, name it anything, second, right? And I think at this point, I think it goes here. I'm doing this from memory. You can basically namespace it. Nope, I might have to look up the exact syntax, but the idea remains the same here.

[00:10:34]
I'm like, we can look it up. The other fun thing, if you only learn one thing about the tailwinddocs, it is Cmd+K and then you search. So let's check it out. So we've got the peers there and I think peer invalid is peer-checked/name. Okay, so yeah, that should in this case, you can kind of see it, I think I got to name both of them in that case, right?

[00:11:03]
But if you can give it that slash, you can namespace them. And there's a bunch of places where I actually do this in the app with container queries, which we'll talk about at some point, where I actually use this trick for various other things as well. And this is also really powerful for the group one which we will talk about in about 30 seconds.

[00:11:22]
But yeah, so you can namespace them.