2.7 Composing Classes

A few lessons ago I mentioned some of the criticisms of tailwind and other utility oriented frameworks. And the primary criticism is the repetition. And we can just look at our markup and see where we have repeated a lot of the same classes for essentially the same kinds of elements. Like for example, our menu links, we have what two classes for each link and really we should have three because we also are using the focus variant. So each one of these links should have at least three classes applied to it. The same is true for our NAB headings. And then the sections for our content have multiple classes as well. Now, from a practical standpoint, that's not that big of a deal because in today's applications, our markup is generated either by whatever is running on the server. Or if we are using a UI framework like view or react, the markup is being generated. So from a development standpoint, we are typically just writing these classes once and then whatever is generating the markup is going to repeat all of that stuff which is fine. However, size is still an issue. I talked about designing with a mobile first mentality. And that is because in today's day and age, more people are visiting websites from a mobile device. So, size is important. And the more classes that we apply to the same kinds of elements. That is just increasing the size of our files. So, one thing that we can do then is essentially compose our own classes. Now this may sound, kind of antithetical to the whole idea behind tailwind and that is to write less CSS. But sometimes we just have to write our own CSS and that's okay. Because tailwind has some built in tools that really make it easy to reuse the classes that are defined inside of tailwind to build our own classes. So what we are going to do is add a new folder to our project. We're gonna call it source. So the idea is that this is going to be the source code of our application and then we are going to build it and it's going to output into public. So it's just like at the very beginning of this course whenever we used to NPX to build our tailwind CSS. Well now we are going to supply an input file. So inside of this source folder, let's create a new file. It doesn't matter what we call it. I'm just gonna call mine site.css and the first few lines are gonna essentially tailwind that we wanna import the different pieces of tailwind like there is a base piece that's gonna have all of the base classes. There's also a piece called components that contain the classes revolving around different types of components and very importantly are the utilities. So by using this tailwind instruction, we are essentially going to tell the tailwind CLI. Hey, go ahead and pulled in these pieces of tailwind, so that we can build an output file that contain all of the classes from these pieces. But then we can also take this a step further and start defining our own classes. For example, we have an element that essentially serves as a heading for our navigation. So we could call it nav heading. And then we can use the styles that are already defined inside of tailwind within this CSS rule. So we have an instruction called apply. And basically what we end up doing is applying the styles from our tailwind classes. So our nav heading had a few classes, let's take a look here. So we have font bold, we have uppercase, and then text gray 700. So using this apply instruction we can apply these same classes to this nav heading, so that it is going to result in the same styling. But now we will have a class called nav heading that we can use inside of our markup. And the great thing about this approach is that we can also include just normal CSS if we wanted to as well. If we had a very specific color that we wanted to use, like, sharp truce is or even the chartreuse I have no idea. I have no idea how to type that. But if we had a special color that we needed to use, which wasn't defined with a tailwind class, then we could do that here. So we can mix not just normal CSS, but we can mix it with the tailwind classes. So how do we use this input file? Well, let's go to the command line and we want to run npx. Once again we are going to use the tailwindcss-cli@latest. And we are going to run this build command again. But the first thing that we are going to pass to this build command is the source file that is inside of our source folder. It's called site css. And then we get to say that we want to output that to public/tailwind.css. So this is essentially going to replace the tailwind CSS that we have already inside of our public folder. And if we wait a few seconds, this will take just a few seconds to build. But now that it's done, let's go back to our tailwind file. Let's do a search for the nav heading. And there it is right there we can see that the font weight is set to 700. That the color is set to whatever color we specified in that the text transform is set to uppercase. Well, let's essentially do the same thing for our menu links. So we have the horizontal padding of two we have the hover text white as well as the focus yellow. So, we are going to copy all of those. And let's go back to our site.css file, and then we will have a new class called menu link. And once again, we will apply all of those classes. Now we want to get rid of this font semi bold because that is for only the currently active link but everything else is going to be applied here. Now, notice here that we are including the variants and we will see how that affects the output. So we can go back to the command line. Let's go ahead and run that same command once again. And while that is running, we're gonna go back to our index HTML file. And we are going to replace everything except the font semi bold with that menu link. So for our home link will have menu link and then we will have the fonts and be bold. And then we will include a menu link for the classes for the other links. And then once the build is done, which it is complete, we can go back to our tailwind css. Let's do a search for well there it is menu link right here you can see that we have three rules we have menu link, which is just the normal link. Then we have the hover pseudo class applied to it, we can see that it changes the color there. And then we can also see when it is focused. And we can see that the color changes there as well. Now of course, this is all academic until we actually see it running. So let's get our server back up and running. Let's hop back over to the browser and let's do a hard refresh. Now if we click on any one of the links once again we see that the color changes to that yellow color and to prove that all of this is still working, we can inspect this. And we are going to see that the menu link class is applied to those elements. You can see that right there. And then over in the style inspector we can see the actual CSS that those classes are using. Now class composition can be a very wonderful thing. And it is useful in a lot of scenarios. And I want to caution you from using it all of the time. I mean, there are times when it makes sense to do something like this. But one of the brilliant things about tailwind CSS, and really all utility oriented frameworks Is that just by looking at the markup, you can get an idea of the style that is applied. Now, sometimes there is a long list of CSS classes and my eyes glaze over. And it's actually more intuitive to go and look at the actual CSS as opposed to all of the classes applied. But just know that this functionality is there and it can be very useful in a variety of circumstances.