TailwindCSS has become the topic of discussion in the frontend community in recent times. It’s a utility-first progressive CSS framework designed to rapidly style your web projects. I came across and tried out TailwindCSS very recently and sorta fell in love at first sight. I continued using TailwindCSS for a couple of projects to get a deeper understanding of its usefulness. I brought them down to FIVE to help you comprehend the craze about TailwindCSS.
1. Utmost Utility (+configuration)
Using TailwindCSS for your project is like building something with LEGO. You can literally make ANYTHING. TailwindCSS brands itself as a utility-first CSS framework(!). Unlike Bootstrap which is a component-based framework, Tailwind offers you thousands of classes (and dynamic ones) that you can use to style your project. Let’s look at this code for example:
<div class="p-4 md:p-8 lg:p-16 bg-maroon-200 lg:bg-white"></div>
At first glance, this might look like a lot of classes. But if we start breaking it down, we can see what amount of utility TailwindCSS is providing us with. We at first set uniformed padding of 4, which is equivalent to 1rem. Then we say, it should be a padding of 8 (2rem) for any medium-sized or above screens. Then we again say, there will be a padding of 16 (4rem) when it is large or even bigger screen size. And, we have just done all these by mentioning some very simple classes. Now, let’s take a look at how interoperable TailwindCSS is:
module.exports = {
theme: {
colors: {
maroon: "#E7305B",
},
},
}
In our tailwind.config.js file, we added a new color under the TailwindCSS theme. It is as simple as it looks. Now going back to our earlier code, you will see I mentioned a class bg-maroon-200. What this class does is set a very light maroon color as the background. I can now even use another class called text-maroon to execute that color code in any text I write. And, all of these happened without writing any single line of CSS code. And, that’s the pure beauty of TailwindCSS. It marries your configurations with its modules and produces a very comprehensive set of utilities for you to use in your project.
2. Easily Create New Components
To make our project more structured and our codes reusable, we simply rely upon components. And, there is no way around to it. But, what TailwindCSS does is simply provide you with the same extensivity of utilities that you were using as your HTML classes to your CSS files. Let’s look at the following code for example:
.btn-blue {
@apply bg-maroon-500 text-white font-bold py-2 px-4 rounded;
}
.btn-blue:hover {
@apply bg-maroon-700;
}
So quite simply, I am defining here a button component in my CSS file. And, you can very clearly see how I did not even have to write a single property: value to style the component. I just extracted the utilities from TailwindCSS using the @apply directive and attached them to my component. Look closer, the extensivity of the utilities are exactly the same as earlier.
Creating new components with TailwindCSS is like creating a new LEGO with LEGO to build another LEGO.
3. Optimized File Size Using CSS Purging
You might be wondering by now how big the file size would become considering all those utilities inside. And, most of which you might not even use in your project. And, you’re right. If you pull the latest file from the CDN, you will see the file size is pretty large. TailwindCSS uses PostCSS as its preprocessor. It creates all those different variants of classes, screen sizes, properties, modifiers, and directives. That’s why the file size is too large when you pull it from the CDN.
However, TailwindCSS has a fantastic solution for this. TailwindCSS is configurable with PurgeCSS, a tool that automatically eliminates all the unused CSS classes and creates a much smaller bundle suited only for you. This might even be only 10-12 KBs in file size. It radically improves your project’s load-time and makes your web application blazing fast!
4. Better Caching
As you have already seen, you don’t necessarily have to touch your global.css/custom.css file much to make changes to your design. After deployment, if you need to make any small change, you can pretty much do it without modifying them at all. This means you don’t necessarily need to tear up your CSS cache for each minute style alteration/modification. More optimization is always good for your product, isn’t it?
5. It Doesn’t Look Like Bootstrap
I am gonna be completely honest here. Until August 2020, I almost always used Bootstrap as my default CSS framework. I used it for more than two hundreds of projects ranging from small to enterprise scale. To be frank, I am always very careful (and a bit needy) about the ultimate aesthetics of the output. I always push toward building something that’s unique.
The problem with Bootstrap was that if you don’t make a significant amount of changes or override the core components, your output ultimately ends up with Bootstrap-ish look and feel. You sort of have to reverse engineer or write quite a number of CSS codes to bring about the aesthetics or uniqueness you would be looking for.
TailwindCSS, on the other hand, pushes/helps me to execute my aesthetics by default. You don’t have to reverse-engineer anything. If you need to define new components, you can do without baffling with raw CSS.
Bonus: Integrations with Popular Web Frameworks
I recently built this website of mine using Gatsby and TailwindCSS. If you have read or watched The Great Gatsby, do you remember how Nick Carraway was like the perfect friend for Gatsby? The same thing happened when I started to use TailwindCSS for my projects. No matter which frontend framework you use, TailwindCSS will be your Nick Carraway throughout the very end. You can get literally anything you want from it without it questioning you or your choices. It will just do things for you like a humble man.
Most frameworks provide even deeper integrations for TailwindCSS: Gatsby, Nuxt.js, Next.js, Laravel, Jekyll, and more to follow in the coming days for sure.
Compared to the other CSS frameworks, TailwindCSS is pretty new. But it is by far the most advanced and progressive framework for you to utilize. I have already been using TailwindCSS for a couple of projects and the results have been just astounding. From this point onward, it is only supposed to grow and offer even better things. I would highly recommend you consider using or at least trying out TailwindCSS for your next project. You can start exploring TailwindCSS from here. Happy coding!
