Styling & Customizing Spacing

[00:00:00]
>> Let's look a little bit at some of the other kinds of like let's build up like what am I look like to to kind of get towards using a button at this point. So before this is the base button as we just saw that we were playing around with, I am gonna try to walk a fine line today, where I do not make you slog through every single utility class there is.

[00:00:23]
This is gonna be like, we're gonna do some of the basics, and then we're gonna do the greatest hits. Or the ones that I found particularly useful. And some of the concepts, but like. There's obviously in CSS. There's some real esoteric ones too. And we're gonna kind of like leave some of those aside or explore them as we go through.

[00:00:41]
So in our kind of live coding explorations before you saw me kind of add a background color. Text is interesting because it's nicely overloaded, right? You'll see later that like, I can say text white, as like white is the color. Primary is a color if it's in the color's theme, right?

[00:00:57]
It knows that. And there's also like text extra small or small and it knows the difference between the two. And so you don't have to think about it as much. And we saw before, if I wanna add padding in every direction, that can just be like p4 if I wanna add px.

[00:01:14]
And there's a few little like escape hatches in there as well. There is for instance px, which is just one pixel, right? There's a few other ones as well, hidden in there too. So I can change it just for those two different shapes because that button's looking a little square for me.

[00:01:33]
Rounding the corners, you just type rounded, right? And if you just type random I think you'd get rounded medium you can change what the default rounding is, there is everything from rounded small to rounded extra large and then there's rounded full which will do like some ridiculous number like 9, 9, 9, 9, 9, 9, 9, 9 which is useful for getting circles.

[00:01:53]
Effectively, are pill shaped buttons. In that case we can kind of play around with that in a second. You can add a border right, you just say the border thickness. Now, if you look very closely in this there is a border, right but you can barely see this is a light gray border.

[00:02:07]
So the border you both have to define that there is a border and then you also say what color the border is, right? But you can kind of begin to like compose all these things as you go you wanna add a shadow grayed, out a shadow right and you're not because I don't know about y'all.

[00:02:23]
Who remembers the CSS syntax for adding a shadow the first time every time? Nope. There's a few of those that, like, every time I gotta look it up. Except I don't anymore. And the nice part is and this is kind of the secret hack is. So, for instance, if I wanna say a button had a shadow.

[00:02:46]
I can say, if you look, I've got a bunch of different shadows here. I can say 2xl in this case. And the nice part is there's some CSS variables in here, but at least part can see the CSS is getting generated on my behalf. And again, everything is customizable in that theme for as much as you can go, I hate that shadow.

[00:03:07]
So change the shadow and it'll all kind of just work and it will be great. And you know like I said before you've got rounded you've also got like various different forms of rounded that you can like look at as well so you've got kind of all of that in place there that you can like build on top of, cool.

[00:03:33]
Awesome, so let's go back to the button. So again, and the nice part is that IntelliSense, if you have a VS Code, is your friend. A lot of times, like occasionally, do I need to look at the docs? I do. The docs are pretty great too. But a lot of times, I can actually just use my editor to figure it all out, and that's pretty wonderful in this case.

[00:03:52]
There's a little bit like we should talk a little bit about sizing and spacing that we saw before. Here's just kind of an example that we can kinda take a look at and see if we can kind of like, gain some understanding about what's going on here, right?

[00:04:06]
So here I've got a div with a height of 72, at the MX-20, that becomes 18 rem because you're multiplying as well. You can say it's got a width of 96, and you can see what all these measurements are. Now, the really cool thing is, there is that 1, 2, 4, 8, so on and so forth, right?

[00:04:31]
But let's say, Let's say you need something to be 375 pixels. What do you do?
>> Square bracket.
>> Square bracket it, right? You don't actually if it's a one off if you're gonna use 375 pixels of width all over the place, go put it in your theme, right?

[00:04:49]
Go give yourself an abstraction. Let's say you need 375 pixels exactly once and one time only, right? All right, there is an escape hatch built into tailwind here where you can say, let's say 375 which I think is probably not the best number here. Let's go with it, right?

[00:05:06]
I can say 375 pixels in here, and that will then like a class will be generated on my behalf. I don't have to go extend my theme just for a one off and have it littered with a lot of comments like I had to do this because this thing.

[00:05:20]
In this situation, you can just kind of do it. That said, I will yell at you during code review or I won't yell at you. I will say really [LAUGH], or something along those lines, but there's always a situation where you might need it as well. You know, I usually, if I get a design that has that in it, I will round to the nearest measurement that makes sense as well.

[00:05:47]
And that'll actually work for almost anything, right? So you could, for instance, say, okay, the background should actually be. Right? And you can put a hex code in there or like on the fly again, if it's a one-off. So if you found yourself in react, for instance, maybe trying to put style attributes in a react, JSX component, you now have a nicer, cleaner way of doing that, and not having to worry about all that stuff as well.

[00:06:16]
And again, these will like by definition, if you've written it, it's in your file, it's in your debase. But if you remove it, then it will also be like removed from the CSS bundle. And on your behalf, you don't have to think about it. And like I said, you can like that arbitrary values will work for basically, And every single utility class that we have in Tailwind.

[00:06:42]
So you're not in a pinch, boxed in to anything at that moment. You can kind of have an escape hatch and go ahead and do what you need to do. But I would say that if you find yourself doing the same measurements over and over and over again, you can extend the theme or you can go ahead and create any one of those components, so on and so forth.

[00:07:03]
The other option, which we'll talk about the very end of our time together is you can also write plugins for Tailwind. And really the nice part about like the plugins don't. You can do some very advanced stuff and we'll show some of the built-in ones. But the biggest use case that we use it for is we've got several different web properties that we're maintaining.

[00:07:27]
So I can take all of our company's branded typography, MPM install it. I pop in that plugin. And now I've got all of our typography, right? And I don't have to like copy and paste that or even pull in a CSS file, and I get all the autocomplete and everything's hooked up into all the IntelliSense and it's absolutely wonderful, right?

[00:07:46]
And it's like, some of the tooling in terms of the productivity is absolutely there. Awesome. So, yeah, we've got the sign-in and spacing. This is the table of what all the different options are. Because I know how to write JavaScript. This is literally pulled from the default theme.

[00:08:05]
I did not do this by hand. So this is literally from Tailwind. I've actually changed my Tailwind theme right now. Actually, I'm pulling from the default theme from NPM. This is the official set of measurements that you can use, nothing particularly notable, there is 0. There is some of these factual units that come up, there's one pixel if you need it.

[00:08:26]
You can see that it maxes out at around 96 which is I believe, at a normal zoom level is 386 pixels. But if you wanted to add one number up you just go to that theme, you add it in there you got one number up. You need something for some reason like hey I'm porting like a legacy code base and I need 46 real badly, you can make 46, right?

[00:08:53]
You should try not to do anything insane. And make sure that you're using something reasonable so that, again, everyone doesn't hate you. But everything is tweakable, everything is customizable. Everything is wonderful, everything is awesome. The same is true for text sizing. You'll see that text sizing works a little bit differently.

[00:09:12]
We've got effectively I guess we could call them t-shirt sizes. I don't know that I've ever seen a 9XL in person. But I'm wet ready to believe it exists. And the nice part about the text sizing because again, this might just be my own. Peculiarities leaking in here, which is every time I start to write my own styles, I take a lucky guess on what the line space is going to be.

[00:09:43]
And it's just called trial and error, until I don't wanna do whatever I'm doing anymore. And so not only do you get a font size, you also get line spacing. Use everything from letters. Everything is customizable. Everything from letter spacing to line spacing, and even in a one off case, there are ways to kind of say, okay, no, but I also want a looser, like line spacing, something along those lines.

[00:10:06]
All of those are optional. Our ability to just basically compose those utility classes in a way that sees fit and order of CSS classes matter. But if you're using any of the tooling, it will sort it in the right order for the most sensible way to go about doing this.

[00:10:20]
And all of that is there for you. Cool, let's talk a little bit about customizing colors. We got to, by answering your question, talk a little about customizing colors a little earlier, but like we can like kind of go all the way through and begin to extend it.

[00:10:36]
So there's, an app I really like. I've also done this in Figma, as I said, but in case you're not familiar with Figma, I'm not gonna force you to also then download Figma and stuff like that. There's UIcolors.app and it does what it says on the theme, right?

[00:10:54]
It will go ahead and generate a full range of colors for you, and you can put together a full palette in this case. So, you can pick any color you really want, I think we decided. I go with this kind of purple over here as my primary elect and it gives you a name too which is great.

[00:11:14]
Electric Violet. Great and I can export this and you can see that I just basically get everything I need. If I need a different like you can also get sass and stuff like that. I can hit copy code and I can pop it into my theme. And we'll go ahead and we'll just say theme, extend, colors.

[00:11:39]
And we'll pop in electric violet. And now amazingly, I can just go into my HTML here and I'm gonna say BG, electric violet. 600, right? And we've got it ready to go. So I can now decide even I'm stuck replacing some of the colors that are in there.

[00:11:58]
I can blow away that entire color palette and only stick with the colors I want. That's what we do on our like marketing site and stuff along those lines. Or I can extend it with the colors ,and I could make that the primary color as well anything is fair game it's all doable, it's great.