Why Tailwind CSS is so popular among UI developers

Why Tailwind CSS is so popular among UI developers

Divine Orji's photo
Divine Orji

Published on Mar 15, 2021

7 min read

Subscribe to my newsletter and never miss my upcoming articles

By reading this article, you would understand some of the benefits of using Tailwind CSS, and the reasons why a lot of design teams and UI developers prefer to use it over other CSS frameworks. Let's get started!

The Great Before

dun dunn dunnn

Before the advent of CSS frameworks, working with CSS was a developer's nightmare. Even something seemingly simple as centering a div could turn out to be incredibly difficult to work out. You had to account for different browsers, different screen-sizes, and tons of contradictions between them. 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 lot of articles that explain Tailwind CSS in details. According 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" simply means that each CSS class serves one particular purpose, so that it can be re-used. 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?

why

While CSS Frameworks such as Bootstrap and Foundation were really nice and introduced frontend concepts such as "mobile-first" development, they each had their limitations. Bootstrap for a example has a large collection of components, and a thriving ecosystem, but it is an opinionated framework, and you have to work extra-hard to override it's default styles to achieve that custom look you want. Foundation on the other hand is actually quite flexible, and it was the "secret-ingredient" framework for many frontend developers, but it was really complex, and had a ton of 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, but Tailwind over the past few years has really stood out 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 like. 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 the ability to build anything in whatever way they want.

unlimited power

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", which greatly improves their performance. This contrasts 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 own 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 really 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 having to copy and paste groups of classes, you can use the @apply directive to create custom components. Here's what I mean: Let's say in our website, our primary button is blue in color, 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 normal 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 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 copy the group of classes.

All these, and a lot 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

 
Share this