Layout with Tailwind CSS

[00:00:00]
>> This is my favorite tech demo of why Tailwind can be really cool. Head to Results.jsx. Here, instead of search, put grid gap-4 grid-cols-2. Just like that, I have a grid layout. It took me ten seconds to do, very little recollection of how grid works and that kinda stuff.

[00:00:37]
Let's take it one step further. Grid gap-4, and then you put grid-cols-1. And then at the small breakpoint, so sm stands for small breakpoint, make it grid-cols-2. And then at the large breakpoint, make it grid-cols-3 Now, it's in three. It's in two. It's in one. Pretty compelling, right?

[00:01:22]
With 15 seconds, I have a fully responsive grid layout. One, it's the magic of the CSS grid, it's just amazing. If you don't know CSS flex and grid, definitely take Jen's course on it on Frontend Masters. But this is really compelling to me, that it's very productive to just throw stuff out like this without having to think about, all right, what do I need exactly to do that in grid?

[00:01:48]
I mean, I could definitely do this in a grid, it would take me five minutes as opposed to 15 seconds, cuz I'd have to go look it up and remember, okay, this is where all these goes for grid. You can define these breakpoints. So I'm not showing you how to do this, but in Tailwind you can actually go and you can define what is small mean, what is medium mean, what is orange500 mean?

[00:02:12]
You can define all those various variables within Tailwind. But the defaults are really good, so I tend to not modify them very much. But that's totally on the table if you wanna do that. I just remember having to do this stuff by hand back in the Golden Days, just kidding, I'm not that old.

[00:02:29]
But back in 2010 when I was writing code like this. 2010 Brian is screaming at how easy this is. I remember having to do responsive layouts in Reddit, so that would have been 2013 or something like that. Having to code this stuff with floats and stuff like that was just an absolute mess, terrible.

[00:02:56]
I remember the first time I saw Pinterest, and my wife was like, hey, check out this cool app that you can pin stuff on like that. I was like, how are they doing that layout? I was so upset. I spent days pulling apart their CSS to figure out how they're doing it.

[00:03:10]
And then I found out they were doing with JavaScript and I was mad. Anyway, I don't know why that's relevant to what we're talking about right now, but it felt like a relevant confession to have. This is so easy. Cool, let's go do some positioning as well. I just wanted to show you how to do that.

[00:03:38]
Head to Pet.jsx. Link, we'll do relative block here, relative and block And then this class name here where info is, just put absolute bottom-0, left-0, bg-gradient, -to-tr, From-white-to-transparent. And then pr-2, so padding right-2, padding top-2. Okay, and then here, we get this nice little gradient where it start to white and then kinda tapers off here into the top right.

[00:04:38]
It's positioned absolutely on the bottom of the picture. It just kind of gives it a nice kind of look to it, so that they're labelled nicely. So again, hopefully by going through this, even though you might still be minorly disgusted of how long these classNames are, can you see how fast I'm going with this?

[00:05:00]
It's just wild, how productive you can be with these. And I'm still relatively a Tailwind newbie when it comes to these kinda things. People that have worked in Tailwind a lot get really productive and get really fast with this kinda stuff, so, Okay, We did not do Details,jsx, so if you click on one of these, it still looks weird and gross.

[00:05:30]
So my invitation for you after this section is to go do details on your own. You can either make it look like it did before or you can make it your own, that's definitely a playground for you to go and try and expand your Tailwind skills. I've now cut a checkpoint here, so you can go to, let me just show you, down here on Tailwind.

[00:05:55]
At the bottom, if you click here, this will take you to the complete project up until now. It's basically everything that we just did together.