Spacing & Dividing

[00:00:00]
>> All right, so we're just gonna talk a little bit about some really nice utilities. So there's a lot of proxies to just regular stuff. For instance, bg-cyan-700 is not that much harder than writing background color, right, and then your favorite hex code or a CSS variable or something along on those lines.

[00:00:18]
There are some niceties in here though. There are some utilities that are maybe not necessarily default CSS that are pretty cool in this case. So here I've got a bunch of divs, cool, they're stacked on top of each other. Normally, I would probably reach for flex or something that if I wanted to create a layout like this.

[00:00:42]
I don't have to, I can literally just say space-y is 4. It says, basically, that the same standardized spacing in between each of these, and that's all it takes. We can do it with our buttons that we saw before. We'll do it with this one. And so what I can do here is I can say, let's do space-x.

[00:01:18]
And we'll do something egregious just to make the point. That's in the button, sorry. We want it on the container. And then we've got some spacing in there. If I hover over it, it's actually super cool. I'll show you what it is over in here, which effectively what it becomes is whatever the element was.

[00:01:44]
So let's say this is a div or whatever, plus this, which basically means it's going to add a margin to everything that's not the first child, right? So every every element that came after another element, so also known as not the first, right, gets spacing. And you can do that with x or y or x and y.

[00:02:05]
You just add that one class and you're getting effectively this for free cuz it's a reusable utility. And that's kind of when we thought about those layers of base. So yeah, typography, I usually put in the base styles. Some of the components will eventually, I don't find myself expanding the base component layer cuz I have a framework and I have components.

[00:02:26]
And then utilities are like, stuff like that becomes what we think about in the utilities as well. So we've got the ability to space stuff out, which is great. So, again, I could even instead of these, I have these mb-4s here, we can get rid of those. Those are obnoxious.

[00:02:45]
And we can literally just say, space-y, and then 4 is about right. And I'll get the same effect. It'll add that margin bottom to all of them, kind of in between in this case. And so now I don't have to put mb-4, mb-4, mb-4, mb-4. So it's also one of those things, which is, as you get more comfortable with Tailwind, you start to get some of these little hacks.

[00:03:10]
And you don't write as many utility classes, or you can begin to compose your own as needed as we go through.