Intermediate React, v3 Styling with Tailwind Plugins

Transcript from the "Styling with Tailwind Plugins" Lesson

[00:00:00]
>> So first of all, we're just gonna be doing the search params one here today. And then I'm gonna leave it as an exercise to you to go fix details, if you wanna go learn more about how to do and just have something to practice with, for tailwind.

[00:00:12] So you can go ahead and delete this class name here, search params. And let's go ahead and add a bunch of class names to this, let's have p10 March and bottom 10. We wanna have rounded corners. So think border radius. And we wanna have really rounded ones so we can do large roundings instead of medium rounding.

[00:00:38] Background gray 200 sounds good to me. Let's have a drop shadow. Everyone likes drop shadows right there back in vogue. Thanks apple. We have a large one. Let's talk about how to do Flexbox because I think this is fun and I use Flexbox everywhere. I used to have to use like floats everywhere and it didn't enjoy my job as much as I do now, now that I have flex and grid, we'll do grid here in just a second.

[00:01:06] So you wanna have a be display flex you just say flex and I wanna go in a column so I'm gonna say flex column, and then I want to justify centre and item centre so align items centre and then I want to add a like a horizontal or a vertical divider between them so like, always has like a margin bottom or center apart but a border bottom.

[00:01:31] So they have like a nice like utility class for that. It's called divide. And I wanna divide on the bottom. So I can do divide x that would divide side to side and I can do divide y that divides up and down. Like x and y coordinates on a Cartesian graph, right And then we want those divides to be, divide gray and we want it to be pretty dark.

[00:01:55] So divide grade 900 pretty close to a black. So I did a lot of stuff there. But I mean, you can see here as, I was basically just like writing CSS in my brain and then translating that to classes. So now if we go back over and look we can see we have a nice background here and you can see everything kind of goes in.

[00:02:29] Probably one of us to be on. Yeah, I did this on the wrong thing. Sorry. It's not this div here. I wanted this to be on the forum. My bad [LAUGH] so save that and now this will make more sense right? This looks like this like a thing up here.

[00:03:01] Okay. Now, this div up here, what we're gonna put on it is classname equals my0. So my margin first thing, and then top and bottom y zero. So top and bottom I'd want zero margin. That's what that means. As you might imagine, MX zero would be I want zero margin on the left and right.

[00:03:31] Same thing with padding. I can just say PX, there would be zero padding on left and right Then I wanna have on the sides so I wanna have zero top and bottom and I wanna have auto left and right mx, auto And then I wanna have it so it's like width Most of the page, right so like, if I was doing CSS, I would do like width 95%.

[00:03:58] And then I want it to be centered in the page. The way you do that here is they have a column system that they divide the page into 12. And I wanted to take up 11 twelfths of the page, right? If I wanted to only take up a fourth of the page, I could do 312 right.

[00:04:14] In this case, I want to take up most of it, so I'm gonna do 11, 12 And there you go. You can see now it's taking most of the page but at least it's not going all the way to the edge. We got nice round of corners with the drop shadow there.

[00:04:29] And yeah, it's starting to look a little bit better here.