What is Tailwind CSS, why use it in 2023 (vs. Bootstrap)?

Why Tailwind?

For several reasons. Tailwind brings a novel and modern approach to CSS tooling that I found refreshing after using Bootstrap. I found it made developing more fun, and if you know me at all, you know that DX (or Developer Experience) is very important to me.

Those strengths (which we will explore later in more detail) also have several drawbacks. But before we go in deep, let’s start at the beginning. I’ve stated that Tailwind is an atomic utility-first framework. What does that mean, and why is it interesting?

What is (the point of) an atomic utility-first framework?

Atomic CSS focuses on creating CSS classes that only do one thing. The idea is to build your interface by combining tiny, reusable classes. This makes it easier to understand what is happening in your code because each class says what it does on the label without any unexpected side effects.

For example, a traditional framework will create a class that defines the colour, the padding and the background colour of a button:

.button {
  background-color: blue;
  color: white;
  padding: 1rem;
}

Instead, Tailwind creates three classes, one for each of these attributes:

.bg-blue { background-color: blue; }
.text-white { color: white; }
.p-3 { padding: 1rem; } 

If you think about it, this looks like defining each attribute using an inline style, using CSS classes. What is the point, and why not just use inline styles?

Why not just use inline styles?

The purpose of classes in Tailwind (and Atomic CSS in general) is not to write less code.

A predefined set of classes encourages **consistency in styling **throughout the application. I’ve had junior UX designers (working without a solid design system) propose inconsistent colours and spacing across different pages. If you’re using inline styling, nothing prevents you from setting any arbitrary value. But classes define distinct values and impose consistency.

As a bonus, if what you’re building uses atomic design, atomic utility-first CSS classes are a natural fit.

Now, let’s look at the implications for Tailwind CSS and delve into its strengths and weaknesses.

What are Tailwind CSS’s strengths?

As mentioned, Tailwind CSS allows you to create a consistent design system. You can easily define colours, typography, spacing, and more using the configuration file. This ensures a cohesive “look and feel” throughout your project by clearly defining valid values.

However, unlike other frameworks, Tailwind proposes a wide range of settings and provides greater flexibility. Let me explain by comparing it with Bootstrap. Bootstrap is based on a 12-column grid system. Twelve is great because you can organise 12 columns as groups of 2,3,4 or 6. So making a 2-column, 3-column or 4-column layout is easy.

However, if you need to create a 5 column layout for some reason, you’re stuck. Tailwind, however, allows you to setup up 5-column or 7-column layouts.

Bootstrap doesn’t give you this flexibility. And for good reason: every class the framework defines means more CSS code to load.

But Tailwind doesn’t have that constraint. It reads your code and only generates the classes that you actually use. This allows Tailwind to offer a wider range of classes without sacrificing website speed.

And, of course, like Bootstrap (and, truth be told, most other CSS frameworks), Tailwind CSS is mobile-first and provides utility classes to implement responsive layouts. However, in Tailwind, these classes are generated using prefixes. The same system is used to define variants such as hover, active, focus, first and last, to name a few. And can be combined. It almost feels like programming.

All these things combine to make Tailwind a great solution. It does, however, come with a few drawbacks.

Tailwind CSS’s weaknesses

First, while utility-first CSS may speed up development once you understand it, it can be overwhelming. The sheer number of classes to memorise is intimidating. However, the Tailwind Visual Code Studio extension provides IntelliSense and code completion, which somewhat mitigates this.

Second, utility classes clutter the HTML and make it harder to read.

Third, because Tailwind CSS focuses on utility classes, it doesn’t have built-in components as Bootstrap does. Creating your own components can be time-consuming, especially for complex UIs. Thankfully, there are libraries to handle this. For example, Daisy UI or Headless UI.

Tailwind CSS is a powerful and flexible utility-first CSS framework that can streamline your development process and help you create consistent designs. However, weighing its strengths and weaknesses before diving in headfirst is essential.

So, are you ready to try Tailwind CSS? Or perhaps you've already used it and want to share your thoughts? Let me know. And in any case, I’ll see you in the next video !