Should I use Tailwind? 5 things to consider - real experience [2024]

Hey, DEV.to community! In this post, I invite you to discuss whether Tailwind CSS is a viable option to use for styling in projects of any scale.

We've used Tailwind extensively while building our resume and CV builder , Tailwind CSS is

...a utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

It means that we're able to write

<div class="flex flex-row gap-x-3"> ... </div>

and get a div element with flexbox without writing any CSS by hand. This example leads to our first point!

1. 👍 Save time by focusing on the layout

When time is important, Tailwind really helps you move forward. You can prototype and get visible results faster, compared to maintaining a CSS solution.

Tailwind also makes it easier for beginners to pick up frontend development, this includes even seasoned backend developers who have to switch sides.

Our experience

When developing page, we've just defined a custom CSS class.

3. 👍 Tailwind makes it easy to maintain consistency throughout your project

We mentioned the design system briefly in the previous section. This system consists of utility classes with predefined spacings (e.g., mt-2 or gap-x-3). Folks at Tailwind created this system to help people to build consistent UIs without extra effort.

By the way, it's not totally rigid. Spacing values (e.g., 2 in mt-2) are also configurable in the Tailwind config file.

The design system also provides predefined color schemes. Benefit from them by using classes like bg-slate-100 or text-red-800. Your configuration might also define colors like primary, and make experiments with color schemes a breeze.

There are tools online that make Tailwind-compatible color scheme generation an easy task. We have used layout with ease thanks to these utility classes. Predefined spacings helped us to build pleasantly looking UIs instead of spending hours building a design system.

The flexibility of having a primary color allowed us to go through multiple color scheme changes seamlessly.

prose class from the official a well-formatted piece of content instantly.

4. 👎 Sometimes, it feels a lot like inline styles

Imagine an HTML page where you would only use inline styles: no classes, no element IDs, no consistency whatsoever; only code cluttered with long CSS properties. Well, sometimes you need to apply so many Tailwind classes it looks more and more like inline styling hell.

For example, you might need a flexbox row div element with space between child elements:

<div class="flex flex-row justify-between">...</div>

sm: prefix is used to apply a utility class with min-width: 640px media query

To make it stand out, let's add some background color, rounding, and a shadow:

<div class="flex flex-col sm:flex-row sm:justify-between bg-blue-100 rounded-xl drop-shadow">...</div>

As a final touch, let's add some breathing space between child elements (gap-y-3 sm:gap-x-3) so that when there's no sufficient space horizontally, or while on small screens, they are not too close:

<div class="flex flex-col gap-y-3 sm:flex-row sm:gap-x-3 sm:justify-between bg-blue-100 rounded-xl drop-shadow p-3">...</div>

are happy to share our story. Tailwind allowed us to build a beautiful and consistent UI for our resume and CV builder. We hope that the experience we shared in this article helps you to answer whether you should use Tailwind or not.

Do you use Tailwind? Do you prefer to use plain CSS? Let's discuss!