Tailwind CSS is a utility first CSS framework. This allows you to create dynamic and beautiful webpages without having to go back and forth between CSS files. No more having to come up with crazy descriptive but short class names. All this power does come with some draw backs. One of the major draw backs is how messy you code can look, but no worries there is a way to clean this up. Today we will talk about base styles and extracting component classes.
Tailwind CSS styles your applications by using utilities. Utilities are just specific class names that relate to some css property and value. This is great till you have tons of utilities listed like below.
<button class="py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75">
Click me
</button>
Now you want to reuse this element across your application. No problem, just copy and paste right?? Oh wait, what if I want to change the color of my text and background? Now I have to go find every place I pasted and change the utility one by one. This can be very frustrating and make bigger projects unmaintainable. The good news is that there are a couple of tricks to help this pain point.
Base Styles
Tailwind CSS comes with a set of base styles called the preflight. These base styles are bare bones. This is both good and bad. The good is that it opens up for greater control of your styling but the bad is that it removes a lot of common stylings. For example an <h1> and <p> will look exactly the same. Margins are even removed from most elements. This means every time you put an <h1> or <p> you will have to add utilities every time to style it. This gets boring quick!
To fix this you can set your own base styles. I would only recommend doing this if you know that a certain element will always be the same no matter where you use it. For example, if I had a design where I knew that my <h1> would be a set size and a set font everywhere in my application, I would add it to my base styles. This way I can simply just type <h1>Hello World!</h1> instead of adding all the utilities needed. If I decide to change or add something later I can just simply modify my base style instead of finding all the <h1> across my application.
This is very simple. All we have to do is open up our CSS file that has our tailwind setup. Below the setup, we can add our base styles by using the keywords @layer and @apply. The @layer keyword tells Tailwind which “bucket” this set of custom styles belong to. In our example, we are telling Tailwind that these custom styles belong to base layer. This also tells tailwind to consider these styles for purging. The @apply keyword allows us to use tailwinds utilities in our own custom css.
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
h1 {
@apply text-2xl;
}
}
Now every <h1> in our document will start off with these utilities attached. Remember these are just our base styles. We can still add more utilities in different parts of our application if we wanted.
Extracting Component Classes
What do we do if we use the same component over and over again. Adding base styles to each element in that component is not ideal. The simplest way is to extract a component class. We do this just like we did earlier. Remember that the @layer keyword tells what “bucket” our custom css belongs to? We just repeat the above but instead of using the base layer we use @layer components {}.
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.btn-blue {
@apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
}
}
Now in our code, all we have to do is add the class btn-blue and our button is styled. If we want to change something about our button we just have to edit that extracted component class once and it updates every where for us.
With these simple tricks you can quickly clean up your code and make it much easier to maintain. There are other neat tricks that can help streamline your use of Tailwind. I encourage you to go check out the documentation (its one of the best around). I hope you found this helpful and good luck with your upcoming projects!
(all code examples are from Tailwind Docs https://tailwindcss.com/docs)
Top comments (0)