8 Reasons Why Trying out Tailwind CSS is Worth Your Time

I must admit it. It was quite some time ago when I first heard of Tailwind CSS. At the time, I thought, meh, yet another framework trying to compete with Bootstrap. Even more so, I could not understand why anyone would want to challenge it since it is bulletproof, widely used, and offers engineers all that we need. But then, after hearing about Tailwind another two or three times, this new framework at the time caught my attention. It looks like people are actually using it. What if it suddenly becomes the best front-end framework, and I haven’t even tried it? So, let’s check it out.

Before really learning how to use Tailwind, what Tailwind is, and what it does,  I wasn't impressed. I only noticed that in comparison to Bootstrap, Tailwind doesn’t have any predefined components.

However, soon after some deep-dive research, I discovered that Tailwind CSS is actually a utility-first CSS framework. Besides that, I compared it to CSS-in-JS and was triggered to try it in action while doing my proof of concept (POC). While doing that, I noticed Tailwind purges all unused classes, so it must be tiny in production. Are you interested in what more I have learned along the way?

What is Tailwind

Simply checking the framework’s webpage can fill you in on the information that Tailwind is a utility-first CSS packed with classes like flex, pt-4, text-center, and rotate-90 that can be composed to build any design directly in your markup. Additionally, most user comments point out the benefits of how the learning curve with Tailwind is effortless and how hard it is to go back to writing regular CSS after using it. Is this true?

Well, playing with Tailwind CSS myself showed me that it truly is a low-level framework. Need some proof?

1. It enables you to create anything that comes to your mind with a provided set of CSS helper classes.
2. It makes you create custom designs rapidly and with ease.
3. It's mobile-first with different media breakpoints that are easily configurable.

With all of these elements, Tailwind CSS enables the user to build custom user interfaces quickly and easily, without the need to write custom CSS code.

How to Use Tailwind

Before starting, you will need to go through installation and configuration. Find all the details about this here, but briefly, you’ll go through standard steps like installing Tailwind via npm, adding Tailwind as a PostCSS plugin, creating your configuration file, including Tailwind in your CSS, and building your CSS. However, these will be the steps if you’ll use it as a PostCSS plugin. Since installing Tailwind can be a different process depending on what other frameworks or tools you are using, make sure to check out the correct guide on the link above.

In any case, the initialization will generate a file named tailwind.config.js, which contains all your theme data and other configuration.

Going forward, you will be able to define a custom theme. Here is an example of a file where we have defined different media breakpoints, added Ubuntu font to the font collection and added more spacing values. In addition, we have configured that we want to purge classes that are not in use.

Another cool feature we get with Tailwind CSS is their out-of-the-box support for dark mode. Simply type ‘dark:’ in front of any class that defines color, and it will work.

Moreover, we also get styling elements for hover, focus, and other cool features we can easily add, like appending dark: that are available in the helper classes.

How does Tailwind Compare to CSS-in-JS

It is true that in CSS-in-JS, styled-components are a similar idea as Tailwind CSS. Namely regarding separation concerns, since there is no separation between markup and styling. Therefore, styled-components provide a way to write regular CSS within Javascript code, especially handy for theming. However, there are still differences between using the two frameworks, and each has its pros and cons.

Utility-first Tailwind CSS:

Pros:

• Naming and context switching (element style is defined with their provided utility classes, so you don't have to switch back and forth between HTML and CSS files).
• CSS stops growing (you don't have to write custom classes, optionally you can use PurgeCSS to remove unused CSS).
• You can create components (extract Tailwind code to reusable classes).
• Cache invalidation (you don't have to worry about invalidating CSS assets).

Cons:

• Hard to read markup (you can quickly end up with very long class names).
• Learning curve (have to know Tailwind CSS equivalent helpers).

CSS-in-JS:

Pros:

• Naming and context switching (you don't have to worry about switching back and forth between HTML and CSS files).
• Scoped styles (easier to maintain, eliminates the worry of affecting anything else).
• JS functionality within CSS (valid for theming and styles are based on user input).

Cons:

• Performance (Historically, there has been an issue with styled-components, but it seems that they manage to fix some of the problems in v5.)

Eight Reasons Why I Ended up Liking Tailwind

Is Tailwind the best front-end framework I have come across with? Probably not for every development project, but after some documentation research, I was intrigued enough to decide to try it in action and create a POC. I did a Next.JS project and tried to include Tailwind CSS. And it was so easy that it isn't even worth a mention! Besides being a developer-friendly framework, Tailwind creators provide a comprehensive documentation library and how-to guides on Tailwind use with NextJS, NuxtJS, Create React App, and similar.

Here’s a summary of key points why I ended up liking Tailwind:

1. It’s easily customizable
2. It's tiny in production as Tailwind CSS purges all unused classes, so it can make a production build as small as possible.
3. Dark mode is available out of the box.
4. It’s component-driven.
5. You can extend it, tweak it or change it effortlessly.
6. The VS Code extension is available, so you don't have to remember all the helper classes.
7. It is easy to include it into NextJS or Create React App.
8. You can add animations with tailwindcss-animatecss, which extends helper classes with animation classes.

But why listen to my opinion? Experience it yourself by checking out Tailwind on your own at their playground.