Intermediate React, v3 Tailwind Basics

[00:00:00]
>> Let's go on to the basics here. So, here we put in this p-0, this m-0, and this was a nice way of just doing padding 0 and margin 0, but let's just go ahead and see what it'll look like if i put m-24 in here. So, if I go back here to the Adopt Me page, not that one.

[00:00:27] Refresh the page here, except mine is not running, so I have to get it back running again, npm run dev. Refresh the page here, notice I push everything in a lot, right? So if I go look at this body and root and this one right here, notice that there is a margin of 6 rem, which is a lot.

[00:00:54] You might not be familiar with the rem measurement, it's root so there's a thing called ems. I imagine many of you have probably seen ems before, right? Ems actually scale with your font size, right, cuz it's the size of a literal m, right, like an m on the page.

[00:01:12] You also might not be aware, but there's also an x. So the m is the width of an m, and the x is the height of an x, a lowercase x. Sometimes it's useful too, I've never had to disambiguate the two But the nice thing about ems versus rem, sorry, the nice thing about rems versus ems is it does change with type.

[00:01:37] So if I have a smaller type in a smaller component, that will make that measurement smaller, which can be not what you expect. When you put in a root rem, it's the root of your entire page. It measures that end, so it actually doesn't change with the type scale the various different components.

[00:01:58] It's kind of a subtle difference, but I would say nine times out of ten when you're using ems as a measurement, you probably want root ems. Only when you specifically do you want it to scale the type scale, then you want ems. And not that it really matters anyway, all of the measurements in Tailwind are all done with rems anyway.

[00:02:18] So I just wanted you to be aware of what you're looking at. Cool, so let's take away that 24, let's go back to 0 cuz that's really what we expected. There we go. So, now let's go with something a little bit more intense with how Tailwind works. We're gonna make a nice header that has a really fun gradient on it.

[00:02:46] So let's do this. We're gonna have a class name here, and we're gonna put a lot of stuff in here. Width (full), so they have the same thing here, width 0, width 10. So if we did width 24, we just saw that that's 6 rems across, but I want it to go all the way across the page.

[00:03:04] So you can do width (full), that's gonna be width 100%. Margin bottom mb, so margin 10 would be on every side. If I just want to do bottom, its margin bottom 10. Text, I want that to center, so text center. Let's give it a bit of padding p7, seemed like it worked pretty well, and then we're gonna do a gradient, right?

[00:03:29] So we wanna have this really cool looking gradient. So we're gonna say background gradient, and we want it to go from top to bottom, so to-b. If we want it to go to top, to-t, or to-l to go left, to-r to go right, but in this case, we want it to go to bottom, okay?

[00:03:49] We're gonna go from, so this is the gradient now, starting from purple, and we want to purple of intensity 400. So the intensity of these colors range from 100, which is almost white, to 900, which is almost black, and 400 is somewhere in the middle. And then we're gonna go from there to red 500, so that will go from purple to red, right?

[00:04:24] What if you wanna have like a color stop along the way? You can also do via-pink-500, and I'll show you what these look like when we're in there. And then we also wanna have, well, let's take a look what this looks like first. So, save all of that.

[00:04:44] And now look at this, we have this really interesting gradient that we made without writing any CSS. Pretty cool, right? On one hand, we wrote a lot of classes, so it feels kinda strange, but at the same time, you created a gradient without any CSS. So, I hope what you can see here is, if you get pretty familiar with all the nomenclature on this, and you start figuring out these kind of class names, you can start flying by just reading all these class names and never having to hop over into the CSS.

[00:05:16] So what happens if I take this via-pink out, I wanted to show you that. So I take that out, and now notice that color stuff in the middle just goes from straight to purple to red. And if I put that pink back in, we get this kinda nice little pink inner stop layer in there, looks really cool.

[00:05:36] So let's go make this Adopt Me text look a little bit bigger. So let's go into our link class here, and if you give it a class name, it will apply that to the anchor tag for us. So let's make that text significantly better. So let's make it 6 XL.

[00:05:52] So another thing that you'll find there, small SM, medium which is MD, large which is LG, I think, I'd have to go look. I think large is LG. Then there's XL, 2 XL, 3 XL, 4 XL, 5 XL, and I think 6 XL. I think it goes all the way up to 9 XL, I'd have to go look, up to 9 XL, yep.

[00:06:15] So we're gonna do 6 XL, which makes it about that big, right? And then here, we're gonna say text-white, that'll look better against that backdrop. Okay, so, looking a bit better. You might think this is pretty bad looking. I was like, well, you can blame my design skills, but I'm trying to teach you the CSS, not the design portion.

[00:06:42] Go take Sarah's class if you wanna learn the design skills, cuz she's 1,000 times better at that than I am. Okay, and what if we wanted a nice hover states to show people this is a link, cuz right now it doesn't do anything when I hover over it.

[00:06:58] We can do a hover : text-gray-200. So this hover colon is what makes it so we're able to put these kind of pseudo states on them, right? So now if you mouse over it, you get a nice little gray, so people can say, okay, I can click on that.

[00:07:26] And there you go, we just did a whole kinda header without touching any CSS, but just with classes. Does any one have any questions about that?
>> So let's say I don't wanna have, let's say, the padding and the margin in rem, is there any way I can change it back to pixel?

[00:07:45]
>> I don't think so, it's pretty opinionated of how you do these things. You'd have to go check, to be honest with you. There are some things you can do, I think you can move over things by one pixel, by doing something like, I don't know. Let's do margin top-px, and I think if we now look at this in inspect element, Did I put it on there?

[00:08:14] Yeah, it puts a margin top of one pixel, right? So if you wanna move something down just a little bit, there's a couple of utility classes like that. But they're trying to enforce on you, which is in general a good practice when doing CSS and design stuff. They having a spacing system or a rhythm, its the terms that I hear a lot of people use.

[00:08:35] And so they're trying to say, I want one unit, two units, four units, 16 units, and they're proportional, right? And so that kind of helps enforce that. I think that's the idea there. And so, if you're hard over, like I really wanna be able to control that I can do 177 pixels exactly, Tailwinds probably just not the answer for you.

[00:08:56] Or you can go on there and literally put style equals width of 177 pixels, and you can kinda break out of it temporarily for very specific things.
>> If you hover the parent, let's say, I want something to happen to one of its children, is that something possible with Tailwind?

[00:09:17]
>> So, I have over this and it makes the child go pink?
>> Exactly, change color.
>> It's a good question, cuz you could just do a child selector at that point with the CSS. I don't know how to do it, to be honest with you. My inclination is to say that it's not possible, and so something that's specific.

[00:09:37] What you can do is you can just head back over to the style.CSS here, you could say like, let's actually just do it. So if I do header a, and then there's an extends command here. So you can actually continue using the class names from Tailwind, and I'd have to go look at how you do it, cuz I don't remember off the top my head.

[00:10:05] But basically you can say something like Tailwind extends or something like that, then you can just say margin bottom 10. And you can actually use those class names inside of this and the preprocessor will catch it, and then you can continue using the same kinda system just with CSS if you have advanced needs there, and I think that's the purpose of that.

[00:10:22] That if you need to use those kind of advanced selectors, that's available too.
>> For the gradient, you used pink and purple, what if we had custom colors for our theme, like some random hex color that we wanna use throughout the site, throughout the app, how would we do that?

[00:10:43]
>> That's a great question. Let's just go take a look here at the Tailwind CSS docs. You can basically create your own theme that has its own names. So we're just gonna be using all of the colors now for example. But if you go in here to the colors on the docs, here's all of their default colors.

[00:11:03] Honestly, they're pretty nice looking colors, but here in your Tailwind config, you can actually update your theme to like okay, I want white to actually be fefefe, right? And I want red to be this other color of red, and you can see here they're changing color to rose instead of red.

[00:11:22] So you can actually make your own theme with your own names, and things like that, and Tailwind CSS can handle you creating your own theme for everything. And this is true of everything, we're gonna be looking at break points and variants and spacing, those kinda things. You can actually go and define what Tailwind makes those things, right?

[00:11:41] They provide you a very, very good starting point, and I suggest using it to start with, cuz like I said, it's been looked at by high quality professional designers. But when you like start using it for your site and you have, this is the Netflix red and the Netflix black, and you have to have these specific hex numbers, you can go modify those on the fly.

[00:12:00] It doesn't have to be red, you can call it brand red, right? And you can customize what those names are.