Intermediate React, v3 Tailwind Components

Transcript from the "Tailwind Components" Lesson

[00:00:00]
>> So the question that you might be thinking at this point is, I can see myself having to copy and paste the same styles a lot. So if I have five inputs, do I need to copy and paste that on every single one of them? And the answer is no, you can still come in and you can actually make what are called components.

[00:00:16] Let's come back to our style.css. So I have this problem now that I have these components here, basically all these inputs that should have some relatively similar styles to each of them. I would like to apply the same style to each one of them without having to copy and paste this my-10 to it.

[00:00:37] So come back in your style.css, and let's put this in here. So the first thing you wanna say here is layer components. And we're basically scoping this down as here is the component that exists inside of my application. So we're gonna put this layer components. And then here you can put some CSS classes, right?

[00:00:55] So the first thing we put in here is a search-label, and it's just normal CSS. Here I chose to use CSS, but I also told you that there's also the ability to kind of use the Tailwind CSS classes themselves. And I'll leave that to your discretion. In this case, I found it faster to just do a label here.

[00:01:19] Okay, so margin-bottom 15, margin-top 15, width 100. All stuff that you can use to display flex. This will make everything look nice and centered for all these various different labels. And then the search control, this is gonna be the, The input in there. So instead of having all of these, let's go back to our SearchParams, these, my-10s, right?

[00:01:53] So let's go ahead and delete all those that we just put in there. Now what I wanna do is I wanna give this a className, Equals to the search-label that I put in here. And I'm gonna put that on each one of the labels here. And so now I have this reusable style component that I can put everywhere.

[00:02:19] Okay, and then I also need to have a search-control. Starting to look a little bit better. I think I put that on here className = search-control. Is that what this ended up being? And yeah, you can put that on the button if you want to, but you also go ahead and put these, instead of the w-60, replace that with search-control.

[00:03:06] And now we end up with something that looks significantly nicer than what we had before. Right, this actually looks mostly respectable. PostCSS, you can kind of think of to fill a similar role to SAS. PostCSS, in and of itself, is like Babel that all PostCSS does is process CSS, right?

[00:03:35] Babel by itself does nothing. Babel needs plugins and presets and configuration stuff for it to do anything. PostCSS is the exact same way, whereas SAS out of the box does a bunch of stuff. SAS is a language unto itself.
>> Great, thanks.
>> Yep. So in this particular case, PostCSS is the processor, but the actual transformations are coming from Tailwind.

[00:04:04] And that's the difference there. Tailwind needs PostCSS. PostCSS doesn't necessarily need Tailwind. Okay. And then we can do our button down at the bottom. So let's replace the search-control with rounded px-6, so padding on the left and right of 6, py-2 to have some padding top and bottom.

[00:04:42] Remove that color, text-white hover:opacity-50. And border-none. That'll make a nice little button there that'll look significantly better. So you can see those got nice rounded corners and all that kinda stuff, there you go. Rounded px, I think everything here is we've all ready kinda talked about. The hover opacity-50, that makes it so whenever I hover over it, it goes 50% opacity, so it looks like it's a clickable button, right?

[00:05:25] People expect that. Okay, we do have one problem right now. So right now this breed selector is disabled, right? And right now it looks very clickable. So a user might go in there and he's like, wait, why can't I click on that, right? It's only populated once I select dog, and now there's breeds to select.

[00:05:50] But when it's empty, it should look grayed out. So how do we do that? Well, if you're on PostCSS 8, you can just do this. Let's go up here. On the breed selector up here, this one, we could do disabled:opacity-50. The issue is this doesn't work on the PostCSS 7 version that we're using.

[00:06:22] So we have to kinda go hack around it a little bit. But like I said, everything's the latest version of Tailwind, this would just work out of the box. But never fear, there's a little thing that we can work around here. If we go into here into the variance, into the, Here, instead of the extend, we can say opacity, after, and give it a little function here.

[00:06:56] After:["disabled"]. So if this is a little opaque, pun kind of intended there. It's cuz it's a kind of esoteric way that we can basically say, hey, if you find this disabled pseudo class here, then allow the user to set the opacity. If you want any more explanation than that, you're gonna have to go dig into the docs cuz that's basically what I got out of it.

[00:07:26] All I know is that it works, right? And now what I'm gonna have to do because this is a new config, I have to stop and start the server again. So again, I kinda get caught by this bug always with Parcel that whenever you are modifying configs, you gotta go clear the cache.

[00:07:56] You have to delete the cache. You have to delete the dist. And then you have to start it again. Cuz a lot of time, what Parcel is doing is it's caching all of those configurations so that it doesn't have to reread them. I think Parcel 2 has fixed a lot of this.

[00:08:16] And there you go, now it's finally grayed out. So now, if I change this to dog, notice this gets ungrayed out and people can like, okay, now I can select things. And then I select this again and it is grayed out again. Luckily, again, if you're using the latest version of Tailwind, which very soon will have Parcel 2, you will not have to worry about doing this workaround to get there.