Configuration & Variants

[00:00:00]
>> Steve Kinney: So we talked about that theme layer. Like I said, we saw that bg-blue-600, right? We can look at the default colors in the docs later if we're interested. You can add additional colors like we want brand. We see this pattern that's built into the tailwind default colors of blue-600, blue-500, is a range of shades, right?

[00:00:21]
You could just say hey, I only want three of every shade. Like blue, blue, light, blue, dark. You can change any of these you want. Or you can just say here's our brand color and maybe the secondary color as well. Now you can do BG brand and you will get that color.

[00:00:37]
You change the CSS variable, it changes everywhere in your app. Life is good. And it's all as you can see, other than having that theme layer, it is just CSS variables the whole way through. There's also a bunch of what we're going to call depending on the use case variants in a lot of cases or utilities to do what would otherwise been verbose things in css.

[00:01:06]
So we've got these responsive breakpoints like MD and LG which will basically do the media queries for you. So if you wanted something to be full width in the beginning and then when we get to a medium sized viewport, go to like columns or whatever, you can just prefix a class, any utility class with MD colon and then it'll do the media query.

[00:01:30]
It'll nest everything appropriately. You don't have to write all of that stuff, it happens for free and you can stack them. So like MD hover, which means only on a tablet ish device only only when they're hovering, have this background color and instead of like the pseudo selector of colon hover and then also the media query inside of that, you get to skip all of that.

[00:01:52]
And you what seems like, this is super verbose when I look at the markup. If you do the math in your head on a long enough timeline, you end up writing a lot less.