In the ever-evolving world of frontend development, staying ahead of the curve is paramount. One tool that has been gaining immense popularity in the last four years among frontend developers is Tailwind CSS.
In the latest edition of State of CSS you can see that Tailwind CSS got a lot of awareness since 2019. Until this day, the number of users keeps growing. And I think that this trend will continue. Not just that the official React Documentation is built with Tailwind CSS, also Remix has built in support for Tailwind CSS (see their docs). Shadcn, which is well known for shadcn/ui, "a collection of re-usable components that you can copy and paste into your apps", announced on Twitter that he got hired by Vercel. Last week, Vercel announced a new tool by Vercel Labs called v0 which is an AI powered generative user interface that generates copy-and-paste friendly React code based on shadcn/ui and Tailwind CSS. And the list goes on.
Custom styling and CSS methodologies
Traditional CSS often involves writing custom rules for each element, which can be time-consuming and lead to larger stylesheet files. The bigger the project, the harder it gets to write extensible, maintainable, readable and scalable CSS. There are great ways to structure and craft your CSS. Methodologies such as BEM, INTUITCSS or SMACSS really help developer to organize the CSS if done consistently right. In my opinion, there are still some problems to it that I faced in real world scenarios working as a frontend developer in a team.
- Everyone must be on the same page and follow the guidelines. I found it particularly frustrating working with developers that either didn't follow the principles and guidelines or used them halfway or mixed them and created some sort of a new undocumented methodology, including their own ones. Eventually, you'll end up with spaghetti code and specificity problems you intentionally wanted to avoid.
- Naming things is one of the hardest things in programming and finding semantic class names can be a nightmare. With BEM you get a recognizable terminology but in the end you still have to come up with something.
- Unused styles increase the size of your stylesheets and eventually slow down your site. Finding and removing them confidently is a hard problem.
Utility classes for the win
Tailwind CSS is following an utility-first approach. Rather than writing custom CSS for different elements or components, developers can harness a vast library of pre-built utility classes to style their HTML.
The framework comes with a well-organized set of utility classes like flex,
p-2, items-center and bg-black that can be composed to build amazing
designs, directly in the markup. Each utility-first CSS comes with predefined
functionalities. For instance, bg-black stands for
background-color: #000000;, m-0 for margin: 0; grid for display: grid;
– you get the idea. You only have to attach those classes with predefined styles
to your markup and those styles will be applied to the element.
Let's say you've got a div that needs white text centered on a blue background
with some padding. With traditional CSS, you would probably create a new class
of box and add the properties like this:
.box {
background-color: #3498db;
color: #fff;
padding: 20px;
text-align: center;
}
With Tailwind CSS, you can achieve the same styling using utility classes directly in your HTML.
<div class="bg-blue-500 text-white p-4 text-center">
This is a styled div.
</div>
As you can see, Tailwind CSS offers a more concise and declarative way to style elements, resulting in cleaner and more maintainable code. Which brings us straight to the benefits...
1. Speed and Productivity
The wide range of utility classes eliminates the need to write custom CSS for many common styles, allowing you to build user interfaces much quicker. By adjusting or adding classes directly in your HTML code you can make design changes easily.
2. Design Consistency
Tailwind enforces a consistent design across your project. This helps maintain a cohesive look and feel throughout your website or application.
3. Responsive Design
Tailwind CSS incorporates responsive design utilities that simplify the process of crafting layouts that seamlessly adjust to diverse screen dimensions and devices. With the ability to conditionally apply each utility class at distinct breakpoints, it becomes exceptionally straightforward to construct intricate, responsive interfaces directly within your HTML, eliminating the need to delve into external stylesheets or scripts.
<!-- Gap of 2 by default, 4 on medium screens, and 6 on large screens -->
<div class="gap-2 md:gap-4 lg:gap-6"></div>
4. Performance
Tailwind CSS cares a lot about speed and making your website load fast. It does this by creating a small CSS file that only includes the styles you use in your project. How? Well, Tailwind CSS uses PurgeCSS under the hood to remove all the Tailwind utility classes that has not been used in your project.
In Tailwind's documentation v2, they had this nice metaphor:
Think of Tailwind like a giant box of LEGO — you dump it all out on the floor and build what you want to build, then when you’re done you put all the pieces you didn’t use back into the box.
To be continued...