Base Styles

[00:00:00]
>> So, let's talk a little bit about these base styles. If you look at this little playground right here, I told you it was aggressive, right? I believe that's a button, right? I literally had to read the text that I wrote to remember what that was, because that button is not looking particularly button-like.

[00:00:28]
You can see that I have an input placeholder in there. Otherwise, it would be hard to tell it's input, but I can click on it. See, that makes it more clear it's an input. And this is technically a button, but it has no styles whatsoever. And so this normalizes across the browsers.

[00:00:42]
But yeah, there's a certain amount of base styles that you will have to set up as you go in. So let's actually take this one. We're gonna open it up. And let's actually look at taking that base layer and adding some of those core styles in there. So I've opened up in the playground.

[00:00:59]
I've got various views here. I've got a responsive view that we'll use a little bit later when we talk about responsive breakpoints. I can do this up and down version, or I can do a left and right. You could also see the generated CSS as you go along as well.

[00:01:17]
Other than basically the preflight, which is the base styles, there's not a lot in here just yet, but it's basically going through and trying to make it so that all the little browser peculiarities are taken care of, and you don't have to think about them. And so that when you start to build out your own styles, you get to the point where it's like, you're not worrying about like, does Firefox do this differently than, let's be clear, Safari.

[00:01:44]
And all of those things as well. So the most part, our day to day is actually putting these utility classes in the HTML. And to be clear, yes, React, JSX, Vue, Svelte, anything that takes a CSS class, this all works. And I hope, honestly, having components that you then reuse and have these classes in them is super helpful as well.

[00:02:12]
But it's anywhere that you can use classes, you can use tailwind. And so integrating it with whatever your current setup is, is fairly straightforward. It's going to spit out a CSS file as long as that CSS file is referenced in your production build it, that's it, right? There's not a lot of like, well, I've got to get this all wired up just right.

[00:02:34]
It's pretty, and we'll see in a little bit. And then this is kind of what a basic kind of version of a CSS file looks like. I've got this apply in here. And all I've done here so far is, because it literally strips everything out, I have put a little bit of a margin around it so that if I get rid of this, you can see my preview.

[00:03:04]
It's really up against there, and in my little widgets in there, I wanted some space. So that's it. But we've got this apply and the ability to take any utility classes. And you can kind of hover over and see what it is in practicality. The first thing you might notice is m-8 is 2 rems, right?

[00:03:28]
Which is a scale of unit. And then if I do 4, you kinda see the autocomplete here as well. 4 is 1. And so kind of the way the scale works here is you've got 1 rem, then you have 8. You can take a lucky guess what 16 is, right?

[00:03:45]
And so it goes all the way up. I think, depending on which one you're using, we can take a look at the default style in a little bit, default theme rather. But depending on which one, there's certain upper bounds, but if you're like, I need one bigger than that, we'll look at how to extend the theme as well.

[00:04:03]
And you can either replace it wholesale with your own theme, or you can extend it with anything you want as well. And both are totally reasonable options. We do it all the time for things that we're using constantly as well. And so do you make the higher class or stuff for some of our branding, like stars in the background?

[00:04:23]
That can just be a background bg slash bg just stars. And now I've got that background image everywhere as well. It can all happen in the theme, too. And so we'll take a look at that at one point, too. Awesome, so this @apply is just gonna take those utility classes and allow you to use the PostCSS to, quote unquote, apply them in there as well.

[00:04:46]
The other thing that you have available to you is I really wanna write regular CSS, but I do wanna pull in the colors on my theme, right? That is totally doable too, so instead of this, we could say something like, let's say I'll keep that for a second actually.

[00:05:08]
And we'll say the background-color. So regular CSS and I get the theme function, which is a CSS function in this case. CSS variables work, all CSS is fair game, right? You're not opting out of anything and going to some walled garden. It's all fair game, it's just a bunch of conveniences for you.

[00:05:29]
So the theme, and you can kinda see all the things that I can tweak in here as well. There is background color, so on and so forth. I was gonna grab just regular color, but let's try it out. So now, these are colors that we'll learn how to extend them later.

[00:05:45]
But these are kind of the colors that are built into the default theme. And so if I wanna write regular CSS, but I also want to be able to hook into the theme, I can also do that. So this line right here, and if I also said bg-red-700.

[00:06:08]
Not the @ there though. Those are effectively putting the same thing in there, right? This is giving me the opacity of 1, right? It's doing some CSS variable magic, but these are effectively giving me the exact same output. And so depending on what you're seeking to do, both of these are available to you.

[00:06:29]
And so, for the most part in our apps, we predominantly use this pattern. But if I do need to get down to a lower level and just access the theme directly, this is also a very reasonable thing to do as well. And so theoretically, you could just pull in a tailwind theme and use none of tailwind, right, other than hooking into the theme.

[00:06:51]
And that's totally fine as well. Awesome, and so let's actually make that side-by-side. So we have a lot of the stuff in place, and like I said, you can kinda see that there are a bunch of the basics here. And anything that I adjust here, I can also say like if we change this to 32.

[00:07:13]
Not every number is represented in there. They are kind of like these scales up, right? And you can go look at the theme at any point or you can just trust your good friend, autocomplete, to help you. I think both of those are totally fine ways to do it.

[00:07:24]
And so we wanna start to flesh out what the basic, that kind of base styles. The other thing we might do is put it inside of that base layer. That way, it's bundled up with those preflight styles. And so we kinda get that all together. So we can actually say, @layer base, and then I can say something like, we can grab the button.

[00:07:54]
And we can say apply. I could say bg, what color we like, blue? All buttons are blue, right? bg-blue, right? And you can start to see some of the shape of a button, right? I could say that I want the left and right padding to be 2 and the up and down padding to be 1.

[00:08:23]
It's starting to look like a button. I can say that I want the text to be white, right? And you can see a lot of these are like name says bg-blue-500. It is very clear when you look at this later, what that is doing, right? It's very clear when I look at this, the rough shape of the styles in this point, and there's a lot of them that are kind of nicely overloaded.