Using CSS Layers

[00:00:00]
>> Steve Kinney: Let's talk about some best practices and anti-patterns, mostly for the express purpose of seeing a little bit more of what a Tailwind class system looks like. And then what we're gonna spend the most of our time doing today is just building lots of little things over and over and over again until we get the muscle memory in place to feel like we know tailwind like the back of our hand.

[00:00:24]
So there are just some kind of basic concepts that we will then refer to. So I'm gonna just put a few little place markers in your brain so I can reference them later effectively. So when you import Tailwind css, it uses CSS layers, which are a modern CSS feature.

[00:00:44]
They are not tailwind specific. They are ways to kind of have different layers of the cascade that you put in a given order so that anything happens over one layer, so on and so forth. We have one for the theme. This one is special. All of the CSS variables that we define on the theme layer then become utility classes that we can use.

[00:01:05]
So let's say you do not like the colors that Tailwind comes with out of the box. You can go ahead and redefine those CSS variables and now they'll mean different things. Let's say you have a color that is brand. You can make a new color that is brand instead of blue and use that everywhere.

[00:01:26]
Success, error warning, stuff along those lines. You can add colors, you can move colors, you can change what the default font size is or the default font just by defining new CSS variables. The only thing that you have to keep in mind is that if you would like them to then turn into tailwind classes, they need to be on that theme layer.

[00:01:44]
Again, we will see all these things. We're just doing the high level at this point first. Then you have a base layer, which is all the times when you would style stuff. Like if you need to style what body is or the kind of base HTML elements, okay, lists, input fields, so on and so forth.

[00:02:06]
Now if I was to channel like the official stance of the Tailwind team, they'd be like, you probably don't even need to do that. You should probably just have components that you put those classes on and use. And they're not wrong, right? Cause like, if you decide like we'll actually see this at one point.

[00:02:29]
But if you decide like all inputs should look like this. Well, if you want to do something clever where you have like an input that looks like it has a button inside, then you need to take all those styles off that input, right? And so a lot of times just keeping your base elements, base elements and putting the utility classes in your markup is usually gonna work out better for you.

[00:02:49]
But if there are reasons or all sorts of things, especially if you're migrating in a brand new code base, sure, then we all know that sometimes we don't get to work in green fields all the time. Base layers, where you style all of those raw base elements in HTML, then you've got your components, which is more like if you had a particular button, so on and so forth.

[00:03:13]
Then this utility property, which we'll see later as well, we can make one off little helpers as we go along. I need to add an additional class to everything Tailwind gives me, but I need to add this one special class that we use. You just do utility, the name of that class.

[00:03:27]
And now it is in there as well. The nice thing when we get to the tooling in a second is like I said before, there is a learning curve. That said, if you use Visual Studio code at least, which is the only editor I use, other than ones that are just VS code in Wolf's clothing, you can get this Tailwind IntelliSense plugin which gives you autocomplete because who doesn't love that?

[00:03:56]
So anything you use with @utility or on the theme layer, your CSS will just work if you ignore all this, right, but it won't get stripped out. If you don't use these layers and you don't use these tools, everything will work just fine. Tailwind won't know to go looking for them to strip them out.

[00:04:13]
You won't get them in IntelliSense, so on and so forth. Everything will be okay. But like you will just not be totally optimized.
>> Speaker 2: Do the order of the CSS layers matter? For example, does components override base?
>> Steve Kinney: Yes, so the order matters, but Tailwind did the order.

[00:04:30]
The order you write it in doesn't matter, right? When the library or the person writing or you, whoever sets up the layers, can basically say, here are the orders of the layers. Tailwind has done that already, right? And so your theme happens and then base happens and then the components happen.

[00:04:48]
So you can write them in any order, right? There is a line and this is just again, you can look at the MDN docs for layers. I looked at them, I was like, I will use this one day. I never did because I just used Tailwind. But you can define the order of the layers.

[00:05:03]
But that's done on the Tailwind level in the way that you define them in your css, it doesn't matter. That's kind of one of the perks of layers is that it sets that order. Because otherwise in css, which one came first? Which is easy if you have one CSS file, hard if you have a bunch.

[00:05:19]
So layers let you kinda define which one comes first.