Styling with Tailwind CSS

[00:00:00]
>> So the one that you might find annoying here is we had to do our background directly in the style tag. This is still CSS, right? If I put a CSS class in here, it still shows up, it's still CSS, right? So you can totally do that if you find this offensive or I'll show you later how to use apply to do that as well or you can just put it directly in as a style tag.

[00:00:25]
There's no problem in doing it this way. If you're in tailwind CSS land, that's just kind of up to you. We did m-0, but there's also as you might imagine m-1, right, you can see that's 4 pixels, m-2, 8 pixels m-12, that's 48 pixels. This goes up to 96 looks like.

[00:00:53]
Which is 384 pixels. There's also -m. So you can go do it in a negative direction if you need to. All right, so it's 1 through 12, then it's 12, 14, 16, 20, 24, 28, 32, 36, 40. So it kind of goes on like this random sort of intervals, you kind of have to know what they are.

[00:01:24]
We're also doing just margin all up, you can also do margin right one, right? So this is b margin right one and you can do margin left one, right? Margin bottom, margin top, as you might imagine. Same thing with padding, padding right, right? Padding left, padding top, padding bottom, or just padding all together.

[00:01:52]
Yeah, and those are intervals apply for both margins, paddings, position relative, all that kind of stuff. Makes sense? All right, let's do our header here. So let's go to our header. I'm gonna give this a class name and this will be a bit more of a doozy depth, width, and you can see all the autocomplete here.

[00:02:23]
Okay, we're gonna do width- full which as you see is with 100% margin, bottom 10, text center, padding 7. Background gradient-to-b, so that's background gradient to bottom. from-yellow-400 via-orange-500, to-red-500, and you can see that totally reorganized everything for me. So margin bottom 10, width 100%, background gradient, from top to bottom, start my gradients at yellow 400 which colors go from 100 to 900.

[00:03:33]
So, 400 is like a middle yellow, right? via-orange-500, so that's means that there's a stop in the middle at orange 500 and then it goes down to red-500. For the gradient, padding 7, sets a padding of 1.75 root ends and then text is centered. So, now you're starting to get a real taste of what tailwind CSS classes look like.

[00:04:10]
So if you refresh this, what are we gonna expect to see on Adopt Me? Nothing, cuz you have to run your server. npm run dev. Refresh the page. Content option. Yeah, I needed to fix that there. Yeah, okay? One crucial thing that we missed here, we have to tell it where to look for our CSS.

[00:04:59]
So you have to put just here ./src /** /*., and then here you need to tell it where to look for your files, for your source files. js, ts, jsx, tsx, html, this kind of covers all of our bases of where all of our files and what kind of file extensions to look for.

[00:05:32]
If you don't anticipate doing TypeScript, you can leave off the ts and the tsx but you do need the js, and jsx, and the html. Okay, now you can see what we have here. So what I like about this is now if I come back to my app.jsx, let's say I'm not super in orange right now, it's really easy for me to just come in here and say blue, it's gonna look terrible.

[00:06:03]
But it's kind of easy to do, like start messing around with stuff, it's very productive to just kind of toy around with things and see where they end up. It's very fluent, I find that I'm able to kind of think of CSS styles and expressiveness classes really quickly without having to hop between files.

[00:06:24]
Okay, so coming here to the link, we're gonna give the link some class names here as well. Let's give this a text. We want it to be really big, so I'm gonna do 6xl, text-white, hover:text-gray-200. So this is how you do different states. So we wanted to have like a hover state that whenever you hover over the word, it's gonna turn a little gray.

[00:06:58]
Ttext-6xl, it's gonna be 60 pixels big, and then the color of the text is gonna be straight up white. Okay, refresh the page, and there you go, you can see it has a nice little hover state as well. There you go. Just a note here on link particularly with regards to React Router Dom, it passes whatever you put here as class name directly on to the a tag underneath it.

[00:07:33]
So nothing too surprising there. Let's pop over to searchresults.jsx. Sorry, SearchParams.jsx, yeah. And here on this, you can delete this search-params class here and we're gonna put my, so that's gonna be margin, top and bottom, right? So my-0, so the margin-top 0, margin-bottom as in like the y-axis, right, that's where the y comes from.

[00:08:16]
As you might imagine, if you wanna do just left and right, you could do mx, that'd be left and right, margin 0, right? So my-0zero, mx-auto, and then widths, we wanted to take 11/12 for the page, so most of the page 11/12. So that's gonna be 91%. So I think for the most part, tailwind divides the page into 12 columns, right, and you're telling it to take 11 of the 12 columns.

[00:08:54]
Okay, here on the form, we're gonna say class name equals P10. So padding 10, margin bottom 10, rounded large, like very rounded, background-gray-200, shadow large, we want to like the large, was that a drop shadows? I think it's just a normal box shadow that's what I was looking for.

[00:09:29]
Let's see. Display flex, flex-columns justify center, and items-center. So, this is doing display flex like flexbox, right? We're doing it into columns, we don't want the items to be centered, so this is a line item center, right? Yeah, this is justify-content-center. We want rounded border radius, background color of gray, padding 10, and then a good sized box shadow.

[00:10:07]
There you go. That's what that turns into right there. So hopefully, you're seeing that I'm being pretty productive pretty quickly here with tailwind. This is what tailwind buys you. If this is appealing to you, you're starting to get why tailwind is useful. If you're sitting there thinking like this still isn't worth it, then I'm probably not gonna sell you on this too much more than that.

[00:10:31]
But I want you to know that this things out there, undeniably, you can code very quickly in Tailwind. Does anyone have any questions about this? I've kind of shown you for the most part what it feels like writing Tailwind. That's more of this. And you might be sitting here thinking how do I know all the names of this?

[00:10:56]
Well, one but that talent IntelliSense, right, you can just say like how do I do like flex grow? I legitimately off the top my head do not know how to do flex grow, I just start typing flex-grow. And it just shows up, right? So one, I'm usually pretty close to guessing, and between that and the intel sense, I can usually guess all the CSS things that I need to.

[00:11:18]
Beyond that, their docs are great, so just go check out the docs. But yeah, for the most part, most of these things you either use them so much like margins, and paddings, and text sizes, and text colors, and things like that, you just remember them off the top of your head.

[00:11:32]
And the ones that you don't, you can either find quickly or find on the doc.