First impressions: Tailwind CSS

I’ve tried Tailwind for 2/3 hours and that’s what I saw

Hi everyone!
I’m here to tell you about my experience with this “new” CSS framework. I’m mostly a Bootstrap user and I’ve used it for 5 years but I’m constantly in search of something new. Not necessarily the latest bleeding-edge technology, just the right amount of code that can help me in the creation of interfaces.

I’ve started my trial with the homepage, usually, it’s the first thing that a user will see. The first visible thing is the value proposition:

A utility-first CSS framework for rapidly building custom designs.

utility-first usually means that you have to use a lot of classes to obtain what you want. In fact, Tailwind has mapped a lot of CSS properties to classes. And here is the main point: it’s like they want to map the entire CSS as classes. To me, it’s not a problem at all. Bootstrap does almost the same thing but with fewer and less flexible options. With Tailwind you can customize are much as you want, for real, because it’s like write CSS in HTML. I like this approach because I try to write plain CSS that it’s not influenced by external dependencies (I’m a fan of shadow-dom and styled-components).

The second part of the says that the developer can create interfaces rapidly.
If we are talking about the utility-first methodology I don’t agree with this point of view. The usage of this kind of frameworks it’s not a matter of speed but it’s a matter of precision and quality. In my experience dealing with a lot of classes on large projects, it can be a mess. You have to pay as much attention as you are writing plain CSS (if not more), so you generally have to spend more time on it.
For example, is really easy to miss a specific class for a specific screen size?
If we are talking just about speed and prototyping I think that Bootstrap it’s still a better option.
(Spoiler) Tailwind offers a “solution” to the problem of the large number of classes to use problem but they also say:

Tailwind encourages a utility-first workflow, where designs are initially implemented using only utility classes to avoid premature abstraction.

So, in any case, they suggest using the utility-first workflow at least until the project scales up. By continuing to read the homepage there are others and more specific key points:

Most CSS frameworks do too much
They want to avoid opinionated predesigned component and they offer a different workflow. To understand what this means I suggest you read this page: https://tailwindcss.com/docs/utility-first/
I really like frameworks that offer you ways to think instead of a lot of pre-cooked solutions (like redux.js)

Responsive to the core
One of the main concerns that I have using other frameworks it’s that they don’t have clear ways to handle responsiveness.

Tailwind uses an intuitive {screen}: prefix…

And the example is really clear:

<div class="justify-start sm:justify-center md:justify-end lg:justify-between xl:justify-around ...">
  <!-- ... -->
</div>

I really like this approach, similar to Bootstrap but more readable.

Component-friendly

<li className="w-11/12 mx-auto mb-2 h-16 shadow-md flex items-center justify-between px-2 py-2 rounded-lg border border-gray-300">
 {o}
</li>

This is an example of a component that I’ve created. It’s just a list element with shadows and a border. As you can see there are a lot of classes for just a single component. As your project grows they become harder and harder to solve. Tailwind already has an interesting way to handle this kind of problems. You can group utility classes.

<style>
  .btn {
    @apply font-bold py-2 px-4 rounded;
  }
  .btn-blue {
    @apply bg-blue-500 text-white;
  }
  .btn-blue:hover {
    @apply bg-blue-600;
  }
</style>

This approach reminds me of SCSS mixins (https://sass-lang.com/documentation/at-rules/mixin) but with some advantages. When you group classes you don't group CSS properties. These properties come with all the responsiveness possibilities and with your custom configurations. A considerable improvement over the standard properties. Another thing is that you have to write less code.

Conclusion

These are just some initial thoughts based on my experience, I’m waiting for yours in the comments (pls do it I’m curious).
I think that I will use Tailwind in the near future because it’s really similar to the way that I use Bootstrap but with a load of more possibilities. It should avoid the fight between me and the grid when I have to create a wacky, strange or odd design (Thank you, designers ❤️).
The great value here comes from the methodology. I suggest you try this kind of approach using something like SCSS. Creating reusable classes tailored to your needs can give you similar achievements.

Thank you for reading! If you liked it follow me so you won’t miss the next article.

Until next time, code wisely.