Intermediate React, v3 Positioning in Tailwind

[00:00:00]
>> Let's go into some positioning and then we'll wrap up here with Tailwind. So our pups have these little name tags underneath them, right. So Luna, so on and so forth. It'd be nice if we could put a little name tag here on the bottom right so it's not just floating underneath, it'd be a lot easier to read, right.

[00:00:17] So let's open pet.js. And here we're gonna make a position relative, right, cuz we wanna position everything inside of it relative to the enclosing a tag. And we'll make that position or a block, right, so it's gonna be a display block. Then here this little info thing, we're gonna remove that.

[00:00:45] You can remove this one up here altogether if you want for the image container. And here we're gonna say its position absolute, it's gonna be bottom-0 left-0. We're gonna have a nice bg-gradient-to-top right, so tr, from-white to-tansparent. And then we're gonna have a nice pr-2 and a nice pt-2 just to get to extend out our little gradient a little bit further.

[00:01:19] So position absolute, which means that this div is going to position absolutely within this relative block. That's why we have to have the relative up here, right. We want it to be on the bottom left of this relative block. We wanna have the background gradient, so it's gonna start from white and then it's gonna taper off into a transparent with a little bit of padding on the top and on the right.

[00:01:46] And now we get these nice little name tags here at the bottom, which makes this a lot easier to read. And again, how quickly we were able to prototype that, that took me literally 30 seconds to knock that out. And when I was writing it myself, I was just able to do it.

[00:02:03] Don't applause me, applaud Tailwind people, they've done a great job.
>> Let's you have used padding throughout the app for whatever, for let's the top ten in a component. And let's say you want to change it to something else. Is it possible to have named variables so that when we say B2, it means whatever two means to us in my app?

[00:02:34] If that question makes sense.
>> Yeah, so basically can you define the values that get output by the padding to and the end to click? Basically can you define your own rhythm? And the answer is yes, you do it all through the theming.
>> Okay cool, thanks.
>> Yeah, okay, so the one thing, again, I didn't do here, so if you click on Luna, we didn't obviously tackle this one.

[00:02:54] I'm gonna leave that to you, cuz I think that would be a fun exercise for you. What do I do with these pictures and how do I prototype that? I think this would be a nice little way for you to kind of cap off your Tailwind experience here.

[00:03:11] Okay, so if you go back to our project here, what the state of the project is now is what you actually have here in the Tailwind directory. So if you wanna go catch up or look at what I did differently than you, that's the state of the repo now.

[00:03:25] And that is the end of my little tutorial on Tailwind. So hopefully that was enjoyable to you, at least it shows you a different current way of working on things. I'm a fan, I use it when I'm not necessarily wanting to write a lot of CSS. If I was starting a brand new big project at Microsoft I might use it.

[00:03:42] I actually quite like it and it enforces some high quality CSS standards. The only thing that you have to trade off here of my biggest downfall is these get so long, right, and I get so sick of looking at such long class names. So that's kind of the downfall from it, but everything else I really like about it.

[00:04:02] The other thing I'll throw out there is Tailwind is made by a company called Tailwind Labs. And they actually have a paid offering as well that has like a bunch of higher order components, like a checkout process or a blog post or articles, these bigger compositional things. So definitely give that a look as well.

[00:04:19] You can save yourself a lot of time by using some of their stuff.