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

[Alex]

Forgot to mention that sometimes things works in dev mode but broken after build, because of complex class parsing internals of tailwind/bundlers.

Thinking about trying unoCSS as an alternative, it's even compatible with tailwind syntax.

[T.H. Jacobs]

Good point, thanks for sharing! Thankfully, we didn't encounter problems with broken builds.

Tailwind vendor lock-in is also something worth keeping in mind. You've mentioned unoCSS, but it certainly would be harder to remove Tailwind altogether.

We're not sure whether we'll keep using Tailwind, or move to some other solution. Thinking about a design system...

[Alex]

TailwindCSS is good for prototyping, not so for complex enough production apps, same as create-react-app, nothing is more permanent than a temporary solution.

Another big pain point with tailwind is to create some reusable components, many pitfalls, again because of that parsing process.

You can mitigate long classNames and make it more reusable like this:

 /* css */
  .codeTitle {
    @apply text-center text-2xl mt-2;
  }

  <div className="codeTitle">...

Honestly, I never seen well organized CSS, always a mess.

[T.H. Jacobs]

like this

This is the exact approach we're considering now - keep some of the useful stuff like m-2 or gap-x-3 and apply it on the CSS level, rather than in the class list.

(Although, @apply seems to be abandoned, and we were thinking about SCSS/LESS, like this.)

[Alex]

@apply realized via postcss - github.com/pascalduez/postcss-apply . Everything depends on postcss.
It was popular at some point, there are many postcss plugins postcss.org/docs/postcss-plugins

[T.H. Jacobs]

Ah, I see - thanks for the clarification.

It was popular at some point

Do you feel that PostCSS is declining in popularity? We've got Tailwind via PostCSS, it would be great to know if it's worth keeping around (in case we ditch Tailwind).

[Alex]

Yes, not sure if it can decline further, but repository still maintained, vite support it for example, probably they got funded by some companies.
Not sure, for me, it was faster to stick to the simplest tech stack, without keeping configs and setups for some tools.

[T.H. Jacobs]

Hmm, I see, thanks for the insights! By the way, do you prefer to use CSS directly or via SCSS/LESS?

[Alex]

Used SCSS mostyly, but now can nest rules in pure CSS

.container {
  .other {}
}

[RioBrewster]

And hallelujah for that!

[mark liu]

Excellent breakdown of Tailwind’s pros and cons! The practical insights you shared based on real experience are incredibly helpful for developers deciding whether to adopt it. Thanks for the detailed overview! スーパーコピー

[T.H. Jacobs]

Thanks for your comment! We hope this post helps not only to decide whether to use Tailwind in a new project or not, but also if it's worth keeping the existing setup.

[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.

[T.H. Jacobs]

Hi, thanks for the comment! Did you try compressing your CSS assets?

[Gherkin H]

Hmm, to be honest I don't know 😅 it was quite a while ago, I knew that this was a concern for the team

[Duca Vitalie-Alexandru]

I doubt the large bundle size has anything to do with Tailwind itself. It already includes only the CSS you actually use. You can, of course, minify and compress the CSS for a smaller bundle size.

[Wizard]

For number 2 issues that some extra classes you don't have in direct bundle, have to make them in configuration file or have to use arbitrary values, for that in tailwind v4, they are going to redefine this, from now on ( when It releases ), anything you want to define you can directly define in css files, no need to clutter configuration files, and also no need to use arbitrary values for most properties, cause if they do not exist in bundle then it'll he automatically be understood as arbitrary values and value will be placed accordingly

[T.H. Jacobs]

Thanks for sharing some insights into the future of Tailwind!

do not exist in bundle then it'll he automatically be understood as arbitrary values

Is syntax going to be different? I don't quite see the difference between "new" and "old" arbitrary values. Any example would be appreciated!

[Wizard]

Like for mx-18, it does not exist directly in main bundle, so we have to do this mx-[18], but after version4, it'll be changed to mx-18 directly like it exist,
Also by default spacing for tailwind was 0.25rem meaning 1=0.25rem, 4=4x0.25rem=1rem, but with this new update we can even specify what should be spacing, like if you want that number is equal to rem or any other custom value,

they are bringing so many new things ( new property classes ) with also more faster builds and fixing so many bugs, you can consider checking their post about v4, it'll be very helpful

[T.H. Jacobs]

Ah, I see, thanks for the explanation! Yes, that would be quite handy. Will check out their v4 post.

[Tomas Stveracek]

For generating color palettes compatible with Tailwind, I recommend using the tool uicolors.app.

[T.H. Jacobs]

UI Colors is great - I've also shared a link to this app in the article. We've used it extensively for color schemes generation.

[ANIRUDDHA]

Amazing .

[T.H. Jacobs]

Thanks for the feedback!

[Hardik Gohil]

Recently, I started using Tailwind CSS while building a website for an agency, and I must say, it's a game-changer. Its utility-first approach makes development faster and easier since you can create custom layouts without writing much CSS. The simplicity of using predefined classes lets you focus more on the design and functionality rather than getting stuck on complex styling. Once you set up your configuration to suit your project, building a responsive and visually appealing UI becomes seamless and efficient.

If you're also exploring Tailwind CSS or need quick references, I highly recommend checking out my Tailwind CSS Cheatsheet website: cheatsheet. It's a handy resource for developers, offering a well-organized list of classes and properties to speed up your workflow.

[T.H. Jacobs]

Thanks for sharing! Do you have an approach to resolve utility class hell?

[Max Well]

Should I use Tailwind for my website design in 2024? If you aim to build a sleek, responsive site, like Folsom Deck Builder Pros, consider its flexibility, performance, learning curve, customization, and compatibility with your project goals

[T.H. Jacobs]

Thanks for the comment!

[Kyle Goran]

Nice article, we recently started using Tailwind in a small React app but it's already hard to maintain styling in the project

[Duca Vitalie-Alexandru]

If you just started using Tailwind then maybe it didn't click with you yet. From my experience most people are disgusted by Tailwind at first but it really speeds things up.
The styling defaults (typography, spacing scales, etc.) are also excellent when there isn't a really well defined custom design system in place.

[T.H. Jacobs]

Wow, thanks for the insights! Are you planning to move on to something different?

[Dusan Petkovic]

Its also viable to use css modules and Tailwind, a recent project where I used tailwind for most of the styling was much more maintainable than the one I decided to use a styling framework like MUI

[T.H. Jacobs]

Thanks for sharing! Could you please share how you combine CSS Modules and Tailwind? Appreciate it!