By reading this article, you will understand some of the benefits of using Tailwind CSS and why many design teams and UI developers prefer to use it over other CSS frameworks. Let's get started!
The Great Before
Before the advent of CSS frameworks, working with CSS was a developer's nightmare. You had to account for different browsers, screen sizes, and contradictions between them. Even something seemingly simple as centering a div could be challenging to work out. Things changed when CSS frameworks came into the picture. They offered a structured way to write your CSS code; some even came with reusable components, speeding up your coding process and increasing productivity. The popular ones include Bootstrap, Bulma, Foundation, UIKit, Materialize, and TailwindCSS.
What is Tailwind CSS?
There are a lot of articles that explain Tailwind CSS in detail. According to their official website, it is "a utility-first framework that can be composed to build any design directly in your markup."
The term "utility-first" means that each CSS class serves one particular purpose so that you can reuse it. For example using bg-blue as a CSS class for background-color: blue;. Whenever you add the class bg-blue in your markup (typically your HTML document or JSX or TSX), you're saying that you want the background of that element to be blue. Adam Wathan, the creator of Tailwind CSS, dives deeper into the concept here.
Why Tailwind?
While CSS Frameworks such as Bootstrap and Foundation were excellent and introduced front-end concepts such as "mobile-first" development, they each had limitations. Bootstrap, for example, has an extensive collection of components and a thriving ecosystem. Still, it is an opinionated framework, and you have to work extra hard to override its default styles to achieve that custom look you want. On the other hand, Foundation is quite flexible, and it was the "secret-ingredient" framework for many front-end developers. Still, it was complex and had many options that could easily overwhelm a beginner.
These frameworks, including Bulma, Materialize, UIKit, and so on, each have their sweet spots and are well-appreciated within their community. Still, Tailwind has stood out over the past few years among all of them.
What does Tailwind do differently?
Tailwind takes "utility-first CSS" to the next level. While most other frameworks offer components that have opinions about how things should look, Tailwind strips everything down to the lowest level, giving developers the ability to determine how they want their components to look. This means developers have the combined advantages of working within the constraints of a well-engineered design system (making it easy to be consistent with colors, spacing, typography, shadows, etc.) and building anything in whatever way they want.
When building for production, Tailwind optimizes its CSS file and automatically removes all unused CSS, leaving you with a CSS file that is very small in size. According to their website, "most Tailwind projects ship less than 10KB of CSS to the client, " significantly improving their performance. This contrasts with most other frameworks that pack the entire CSS file into the final project.
Tailwind is very customizable. If you prefer not to use Tailwind's default design system, you can create your design system in Tailwind's tailwind.config.js file. This feature takes a while to get used to, but once you know how to use it, you can go on to create amazing things.
Tailwind also has a feature that enables you to create custom components. If you find yourself reusing a group of classes frequently or copying and pasting groups of classes, you can use the @apply directive to create custom components. Here's what I mean:
On our website, our primary button is blue, has white text, has a padding p-3, is rounded, and our secondary button is yellow in color, has black text, padding p-3, and is rounded too. Using regular tailwind classes, we could write:
// HTML file
<button class="
bg-yellow-500
text-black
p-3
rounded-lg
font-medium
">Decline
</button>
<button class="
bg-blue-500
text-white
p-3
rounded-lg
font-medium
">Accept
</button>
It would be extremely tedious to copy this code throughout the project so that I could create a component containing the classes:
// CSS file
.btn {
@apply text-base font-medium rounded-lg p-3;
}
.btn--primary {
@apply bg-blue-500 text-white;
}
.btn--secondary {
@apply bg-yellow-500 text-black;
}
Then use it in the HTML file instead.
// HTML file
<button class="btn btn--secondary">Decline</button>
<button class="btn btn--primary">Accept</button>
That way, it's easier to reuse the components instead of copying the group of classes.
All these and more have made Tailwind CSS a really popular framework among UI developers.
What do you love most about Tailwind CSS? I'd love to know 😊👇
Websites and articles that provide more insight into the wonderful world of Tailwind CSS
Tailwind's official landing page
This amazing article by Ankush Thakur
Another amazing article by Skcript
This amazing article by Karl Tynan