Is TailwindCSS worth it? Tailwind is a utility CSS framework that depends on the developers using it to also know a little CSS. It is lightly opinionated but simple. Do these points together make it harder to use for unfamiliar developers?

Since Tailwind is a utility CSS framework it means that every provided class is a utility. These utilities range from text formatting to flex-box management and more. ex:

flex flex-row justify-center

This is fine. But did you notice these classes are familiar? I mean really look at them. They look like plain old CSS without the extra hassle! For example:

display: flex; flex-direction: row; justify-content: center;

becomes

flex flex-row justify-center

You may be asking yourself how this could possibly be useful. You might even be telling yourself that you could save the learning curve and just write plain CSS inline or in a stylesheet. That might be true. But you would be missing the point of Tailwind and the problems it solves. These near plain old CSS like classes can actually be used to solve many problems that regular development faces such as rapid prototyping and effects.

Let's build a simple card example for those Bootstrap fans out there to demonstrate how powerful Tailwind can be. (Yes. I know you exist and overuse the card component regularly.) We will show the source for the card with inline CSS and Tailwind. This should enable you to see the difference.

<div class="w-1/3 mx-auto my-2 shadow-sm rounded-lg">
    <div class="bg-gray-100 text-gray-600 px-3 py-2 text-lg font-semibold rounded-t-lg">Header</div>
    <div class="bg-white text-gray-600 p-3 rounded-b-lg">
      This is a card example in Tailwind CSS.
    </div>
  </div>

  <div style="width: 33.33%; margin: 1rem auto; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); border-radius: 7.5px;">
    <div style="background-color: #f4f5f7; color: #4b5563; padding: .6rem .75rem; font-weight: 520; font-size: 1.1rem; border-top-left-radius: 7.5px; border-top-right-radius: 7.5px;">Header</div>
    <div style="background-color: white; color: #4b5563; padding: .75rem; border-bottom-left-radius: 7.5px; border-bottom-right-radius: 7.5px;">This is a card example in inline CSS.</div>
  </div>

This renders into the image below:

Okay. So Tailwind does save a little time and overhead if you are writing everything inline. But this is not maintainable! How are you supposed to update your site if you have to go into every tag and update it? Well Tailwind is meant for you to rapidly prototype like we did above and then convert to actual semantic CSS classes. If you have ever used other CSS Frameworks or written your own classes you will recognize them as

.card {}

Tailwind provides a utility if installed using NPM that allows you to compile all those styles you prototyped with into semantic CSS. Please follow this guide to understand how we get here. Once you have read this guide then continue reading! Or continue if you are already familiar with the TailwindCSS installation and setup.

Once we have our prototyped components we can easily convert them into simple to use classes. All you have to do is name your semantic class and drop in everything inside your "class" tag. Ex:

.card {
    @apply "mx-auto my-2 shadow-sm rounded-lg";
}

.card-header {
    @apply "bg-gray-100 text-gray-600 px-3 py-2 text-lg font-semibold rounded-t-lg";
}

.card-body {
    @apply "bg-white text-gray-600 p-3 rounded-b-lg";
}

With our new semantic CSS classes we can now convert our component! Just replace those long utility class-lists with your semantic class. Ex:

<div class="w-1/3 card">
    <div class="card-header">Header</div>
    <div class="card-body">
      This is a card example in Tailwind CSS.
    </div>
</div>

Wow! That is so much cleaner! Once you get to know how Tailwind is supposed to be used and have practiced it you can quickly see why Tailwind is worth it! It can save you time on larger design projects while empowering you to convert back to semantic CSS classes painlessly! Tailwind is also powerful for those not very familiar with plain old CSS as it cuts down on the overhead statements such as "flex-direction: row" and makes it as simple as "flex-row"!

Tailwinds learning curve is in my opinion simpler for those who have little to no CSS experience than actually learning CSS. It empowers teams of any size to prototype faster while compiling into maintainable source code. It even helps CSS professionals!If you enjoyed this article and want to learn more please visit Tailwinds website here!