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 quintCV. Now, we would like to share our experience with the community.

We will discuss positive sides 👍, downsides 👎, and things to consider 🤔.

Let's begin!

Quick refresher — what is Tailwind?

As per Tailwind CSS website, 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 quintCV, we often have to try out a lot of different design or layout ideas. Since we're a small team, resources are limited, while time is precious. Tailwind enabled us to create beautiful UIs and test out our ideas in the field faster.

2. 👎 Tailwind makes it harder to have fine-grained control, but it's not impossible

With a system of predefined classes like Tailwind's, you have to use so-called arbitrary values to have more granular control over your styles, like this: leading-[normal]

Another way to get this is to write custom CSS, or even inline styles.

Example: if you want to have an image as a background, you have to write bg-[url('/background.jpg')] in an element's class attribute, which quickly becomes unreadable in case of longer file paths.

Example #2: there is a design system in TailwindCSS, which, among other things, provides classes for margins with fixed values, e.g., mt-1 or m-6. However, since it's an opinionated system, there's no m-18 class.

You would have to define your own in the config file or use an arbitrary value like m-[4.5rem]. Of course, this example might be too specific, but designers we all have different needs.

Our experience

We do our best to stay pragmatic, and we mix inline styles and handwritten CSS with Tailwind classes in places where that makes most sense. For instance, when adding some CSS animations on our editor home 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 this tool. (Disclaimer: we are not affiliated with the makers of this tool).

Our experience

We were able to prototype our landing page 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 Typography plugin made our flagship article
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>

(Note: gray background added for visibility.)

Next step is to make sure that this container looks good on small devices too - make it a column if the screen is small:

<div class="flex flex-col sm:flex-row sm: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>

Now, let's add some padding (p-3) to the container to give elements some space around them:

<div class="flex flex-col sm:flex-row sm:justify-between bg-blue-100 rounded-xl drop-shadow p-3">...</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>

The resulting line is quite long, isn't it? Now imagine if we had to add a child element of a similar complexity!

One might argue that a “proper” breakdown into smaller components might help you mitigate this problem. However, we see this as an inherent limitation of Tailwind's approach.

Our experience

This is something that we started paying attention to fairly recently. With a growing project, the impact on readability of both source and compiled code becomes very high. It becomes harder to jump into a specific place in the code when you're looking into DevTools while trying to figure out the source of a bug.

Alternatively, you could search your code by a specific class, like toolbar-button. With Tailwind's utility-class approach, it's not quite straightforward.

5. 🤔 TailwindCSS acts as a CSS alternative

Unlike tools like SCSS/LESS which extend CSS, TailwindCSS provides a completely alternative “syntax”. As with any alternative tool, there's always a risk to become too dependent on the specifics. This risk varies with developer's level of experience.

Beginners might be worried that it's better to spend their time learning proper display: flexes instead of flex flex-rows. The good news is that skills that you learn with Tailwind are transferable to the regular CSS. Tailwind doesn't add anything on top of the regular CSS, it just makes its usage a bit more convenient.

Our experience

One of our developers, who had to look into frontend matters after making a switch to backend from full-stack quite early in his career, says that he became more confident with his vanilla CSS skills after developing with Tailwind.

We think that one should never limit themself, and instead treat Tailwind as a tool created to make CSS more accessible, but not to replace CSS altogether.

Should you use Tailwind?

The short answer — it depends. The longer answer?

If you are an experienced engineer with access to an established design system, you might not see much benefit from Tailwind's utility classes. We hope the issues that we raised in this article help you to weigh all pros and cons and make an educated decision.

If

• you are an inexperienced engineer, or your CSS skills are quite rusty
• you are very limited in time
• you don't have an established design system and would rather use something ready
• you feel that Tailwind strikes the right balance for you

then try it out and see for yourself.

❤ Our most loved Tailwind feature: design system basics.
🙅‍♂️ Our least liked side effect: the utility class hell.

Do you already use Tailwind? Share your story!

We at quintCV 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!

Comments

[Gherkin H]

Hey,
Congrats on a great project! I was also considering Tailwind and I just read your post - great points, thanks. I'm leaning towards not using Tailwind again because the build bundle was huge in the last project I worked on. For my personal project I think I'll just use SCSS.