Intermediate React, v4 Basics & Gradients

[00:00:00]
>> So let's talk about like what tailwind is, what it's gonna do for us. And whether you might like it or not. First of all, it's normal that this is yellow underlined It's gonna say I don't understand what this is. I'm just gonna leave it because I don't care.

[00:00:16] But if this bothers you, you can change that in VS code by ignoring CSS .lint unknown add rolls, so you'd go to preferences open settings Jason, and then you'd add a line here that basically says, CSS lint .unknown add roll. And then here you'd say, Ignore. And so if I save that, and this is gonna be cool, I don't care anymore, right?

[00:00:51] You can probably do that like a project level, because you don't always wanna ignore that, but suffice to say, I'm just gonna leave it off because I don't really care. Because we're not gonna look at this style file anymore. Okay, so that's everything that we need from tailwind, let's talk about the what tailwind is.

[00:01:11] With tailwind you write zero CSS. No more style dot CSS you're not gonna write any of your CSS rules in there. Instead, you're gonna use very small utility classes, or like atomic CSS as some people have been calling it. And you're gonna use that to style your app, so basically all of your CSS stuff is gonna live inside of your components as classes.

[00:01:36] This offends some people. Some of the class names will get quite long cuz as you might imagine, sometimes we apply a lot of thing, but it also allows you to go really fast because you don't have to context switch like ever, which is pretty cool. It's popular. I'll say that.

[00:01:56] I don't always use it. I sometimes use it. I've been writing CSS for so long that I can write CSS quite quickly so in general I kinda default to that. My favorite thing is CSS modules still, like very small CSS files that are just important to all of your different components.

[00:02:12] That's generally my like default go to, but tailwind is pretty cool and I've watched some of my friends just crank out stuff incredibly fast and add pieces that I cannot match. So It's compelling. And so I want you to go through it. I like showing these controversial things to challenge what you think about how to write code.

[00:02:31] I think in general that's just healthy. Even if you don't end up choosing tailwind as your go-to thing, you're gonna learn something and it's gonna make you better writing code. Or it's gonna make you angry and you gonna go tweet about. I don't know either way I'm entertained.

[00:02:49] So, there is a cool VS code extension called tailwind, CSS, IntelliSense, yeah, this one. Pretty cool. Let's go ahead and drop that in there. And this is pulled out directly from Tailwind Labs which is the company behind Tailwind. So yeah, Tailwind is free to use but they have a bunch of stuff on top of it that you can use.

[00:03:23] There's additional tooling. They have like pre made components that you can use pre made theming stuff. So worthwhile, right? If you can pay someone else to maintain your code for you I say go for it. So just supporting open source. So, okay. Let's go back to our directory here.

[00:03:45] And we're gonna make a new file here, and we're gonna call it to post, CSSRC. Make sure that you put that dot there, .post CSSRC. Again this is like the babble of CSS. Okay, and here we're gonna give it two plugins. This used to be so much harder to set up by the way, so just feel lucky that this is have a fairly minimal set of configurations.

[00:04:16] You just have to tell what we're gonna include here. So one is gonna be auto prefixer, and we're gonna give it no additional configurations, and then again tailwind CSS, with no additional configuration. This is just so that post CSS is like hey post CSS watch out for this.

[00:04:35] This works the same way of like our Babel config up here, where we're just adding the parts that we need. Need. It is bothers you that is not highlighted you can say change language mode, and just put this in or you put in auto detect it'll probably get JSON, right?

[00:04:54] Nope, change language mode it's in JSON, there you go. All right. So now that we've deleted all of our CSS, if you go run your application, it's gonna look, let's go with slightly worse than it did before. So local host, 2,3,4, probably unsurprising to you but this is what our application looks like, with no additional styling right this is just the HTML in the JavaScript.

[00:05:28] So tailwind like most of these kinda CSS frameworks gives you nothing for free, right? It still expects you to style your application. It's just a way of styling your application. Or in other words, this is a Bootstrap or a bunch of stuff that's just free, right? Or like it's not a style system.

[00:05:48] It's not a design system. It's a tool for building applications. As opposed to something like Bootstrap, which is right Bootstrap is designed to be like your design system. Okay. So, I'm gonna need you to suspend everything you think you know about CSS for like 30 to 40 minutes.

[00:06:12] And we're good with that. For me it's not hard because I don't know that much about it [LAUGH] But just like just take an open mind, that's all I'm asking you here at the end of this, then evaluate how you feel about it. So we have all of our old class names in there.

[00:06:34] You can delete them or leave them because we're doing no more styling on it doesn't really matter. I'm just gonna leave them for the most part. But let's start in app.js. Okay. And then the div right inside of, Same theme context provider There's no div in here. That's fine.

[00:07:02] We can make one. So we're gonna wrap the browser router inside of a div. And we're gonna say, class name, equals p- 0 and m- 0. And so you'll see all these class names coming in. This is coming from that IntelliSense. Extension that we just installed, so if you don't install it you won't have that, in general I kinda leave it off because I don't always use tailwind right?

[00:07:39] But it's useful when you have a talent project. So p- 0, what does that mean? There you go it means padding 0. So I'm seeing that this div here has no padding and no, as you might guess margin. Right? Okay, so probably can't see anything here but you can see now there's nothing between it and the side, that's cool.

[00:08:04] Now we wanna have a background right because we had that nice looking background that was drawn by the artist before. Obviously there's no pre made class for that. So we're just going to put the style in directly. I'm gonna say background, Image not background URL and then you can do HTTP ://pet- images dev- API's.com/pets/ wallpaper, not a capital wallpaper a dot jpg.

[00:08:47] Let me just make sure that is correct before I have you finish copying all that doesn't look like it is Is it Yeah, that doesn't like a threat. All right, http://pets-images Pets images. There we go, okay. So, that's why I checked. I think there are actually a, b and c in here as well.

[00:09:29] If you're interested in customizing it, so that one's grayscale. And then see, I think yes, just like a different palette. So stick with the one you want. I'm gonna stick with a So, again, I'm sure someone is rolling their eyes, is like are we doing style tags directly again, didn't we get away from this?

[00:09:50] We did not, we're coming back, time is a flat circle. Okay, so that is the first one, P0 and Pm0, that's obviously margin, 0 and padding 0. As you might imagine if you want a little bit of padding, guess what? There you go. P1. If you want a lot of padding, that's 2.5 rems, right?

[00:10:17] RAM stands for root M's right? And M is how let's see why it an M is in your font. And are just stands at the root right? As opposed to an M which is relative to whatever the font size is where you are, so rents are the same across multiple divs AMS can be different.

[00:10:41] By the same token, there are X's e x, which is how tall an x is in your font, or I think Rex is our thing too right? Am I not making that up? Let check. Let's see, inspect. We'll say that the, I don't want layout, I want changes, nope not changes, layout.

[00:11:14] Here. No, I want this. Height, 10x, you can see that'll be fairly small. But I think you can also make it 10 REX. Nope, don't make that up. Okay, so I guess Rex is not a thing. But rooms are. In this case, AMS and rams, end up being the same thing.

[00:11:37] Because we haven't modified it. But I think here, if I say 10 or font size 30 pixels, which should be fairly large, right? And then it ends up being different. I don't know why we decided to get into this right now, but it felt important to tell you that.

[00:12:00] Told you this was not a CSS course. Anyway, here we are. Let's go. So, four M's and PS there's one through 12. So you can do P0 through P12 and then at that point, it's more of like a random integer increase, so there's no for example there's no 13 but there is 14.

[00:12:25] So there's 12, 14, 16, 20, 24, 28 32, 36 and 40 and then it kinda just spaces out from there. The largest is 96. There's also a negative, so like you can also do -m1 if you need negative margins, but so all that is available to you. So this kinda lets you just like mess with spacing directly by changing classes, which may or may not appeal to you, but that's how you do it.

[00:12:57] So In general you don't have to do too many style tags like this, but for things like where it's an image we have to give it a URL. Obviously they're not going to give you a utility class for your specific URL. It's pretty rare that you have to go in and throw in a style tag and it's mostly just for specifically for images or content.

[00:13:13] Right? That's about it. Okay. Good so far any questions? All right. Let's do our header. Class name equals and In this one we're gonna do all sorta fun stuff. With full Margin bottom10, text center, padding let's do a nice 7, background gradient And then we wanna go from you can go from left to right to left, top to bottom we're gonna go from top, the say to bottom like that.

[00:14:11] So background gradient to bottom. Okay. And then we want our grading to go from, like a nice purple And it's like maybe, like a medium purple, right? That's like a 400 It goes from like zero to 1000 I think. Okay. So a nice medium purple. Let's go via a pink.

[00:14:42] A medium pink. Yeah, medium pink. And then we wanna go and end up in like a red. So 2 red Again, nice medium red here you can see all the various different colors here will go with a nice medium red. And you get the nice little color squares to, again, that's all coming from the tailwind and tell us sense.

[00:15:09] Okay, with our link, we have to get this some class names too. So class name equals, let's make it like a text and we want it to be pretty big. So let's do like a six XL. So that's real big, right? Let's do like text white, It's nice.

[00:15:28] And then whenever we hover, when you hover a colon, text-gray-200. All right. I intentionally made these bananas so that you can see the kinda the stuff that you can do with talent, right. Typically we would have gone back and forth between our CSS document right I cannot write gradients from memory I don't know if you can if you can I apologize apparently someone has hurt you.

[00:15:57] But I can do this from memory right. This is actually pretty easy to do from memory. So background gradients I'm gonna go from top to bottom, then from via and to that's kinda English that makes sense to me. And now I think if we pop over here, we made this with just kinda handful of utility classes and I did it for memory.

[00:16:18] Now you might argue Brian that is hideous, you are correct it is actually hideous, but it's pretty cool that we were able to do it from memory.