My Tailwind CSS Takeaway

What is Tailwind CSS

According to Tailwind CSS' homepage, it 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's an interesting tool that is gaining popularity, especially among the Jamstack community. Below is my takeaway (and code examples) from the documentation, StreamACon Streaming Conferences and Traversy Media.

1. Less Class Names to Remember

If you have ever taken over a project by another developer, you would know the struggle of figuring what component each class is pointing to. Let me give you some examples.

/* different developers using different names */
.header-menu {
}
.main-menu {
}

/* both sounds correct */
.popup-content {
}
.notification-content {
}

/* developer forced to find the right submit button */
/* somewhere at line 300 */
.contact-form .submit-btn {
}
/* elsewhere at line 750 */
.quotation-form .submit-btn {
}

Coming up with names that are easy to remember and make sense is difficult. And maintainability gets more difficult as the project grows. With Tailwind, we can avoid that trouble all together by using a utility-first approach.

<!-- contact form -->
<form>
  <button class="bg-blue-500 hover:bg-blue-700 text-white p-2 rounded">Submit</button>
</form>

<!-- quotation form -->
<form>
  <button class="bg-green-500 hover:bg-green-700 text-white p-2 rounded">Submit</button>
</form>

No more back-and-forth between your HTML and CSS! Of course, the biggest maintainability concern when using a utility-first approach is managing commonly repeated utility combinations. And this leads us to the next takeaway.

2. Do Not Repeat Yourself (DRY)

Undoubtedly, Tailwind's utility-first approach results in long chains of CSS classes. You end up retyping the same classes when you want the same style but at a different location. To fix this, Tailwind provides an @apply method. Note: This only works if you're using a build process with Tailwind.

<!-- Without @apply: Repeating these classes for every button can be painful -->
<button
  class="py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75"
>
  Click me
</button>

<!-- With @apply -->
<button class="btn-green">Click me</button>

<button class="btn-green">Another click me</button>

<style>
  .btn-green {
    @apply py-2 px-4 bg-indigo-500 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-opacity-75;
  }
</style>

3. Out-of-the-box utilities

Tailwind also provides many useful utilities to style elements on hover, focus, and more.

Group-hover

If you need to style a child element when hovering over a specific parent element, add the group class to the parent element and add the group-hover: prefix to the utility on the child element.

<div
  class="group px-6 py-5 max-w-full mx-auto w-72 border border-indigo-500 border-opacity-25 cursor-pointer rounded-lg select-none overflow-hidden space-y-1 hover:bg-white hover:shadow-lg hover:border-transparent"
>
  <p class="text-indigo-600 group-hover:text-gray-900">Hover over me!</p>
  <p class="text-indigo-500 group-hover:text-gray-500">Convenient right?</p>
</div>

4. My Take

With Tailwind, the main benefit is that you can do the majority of styling in the HTML document itself. Tailwind's set of utility classes is very comprehensive, there is a class for almost anything. While that might sound like a performance issue (Tailwind's 293.9kB is 20X that of Bootstrap's' 14.6kB! ), you can easily pair it with PurgeCSS in your build process to remove unused styles.

Every developer started out learning the basics. We learnt that HTML is for structure, CSS for visuals, and Javascript for logic and interactivity.¹ However, with the emergence of frameworks such as Tailwind and ReactJS, the lines between HTML, CSS, and Javascript are now blurred.

At the end of the day, it comes back to the saying:

Use the right tool for the job!

It is the developer's job to determine whether a tool is suitable. Unlike Bootstrap 4 which offers many ready-made components (official & unofficial) which you can copy and paste such as Navbar and Toasts, with Tailwind you need invest some time upfront to build these components yourself. While Tailwind does offer their own ready-made components, note that it starts from $149USD! Thankfully there is a free repository written by the lovely community at tailwindcomponents. So, would you try Tailwind in your next project? Let me know!

Tailwind vs. Bootstrap is like...

A knife set² vs a Swiss army knife³