My Experience with Tailwind CSS

What is Tailwind?

If you’re a developer, I’m sure you’ve heard of Tailwind by now. Tailwind CSS is an intuitive utility-first CSS framework. It’s designed to make CSS simpler and faster, enabling you to focus on building an app or website rather than worrying about the CSS architecture.

I’ll be honest, I was very against it at first. To me, the idea of utility classes made the code look busy and hard to read. But I decided to give it a try and see what all the fuss was about.

After getting a starter Tailwind project up and running, some things weren’t super clear right away, so I thought I’d share my experience after spending some time reading the documentation.

First Things First

My first thought when working on a new project is to get a general idea of all the reusable components I’m building or updating. So what should be my approach here?

Reusing Styles

Coming from a traditional approach where you create classes to reuse them, my first thought was: “OK, how do I make this button consistent and just reuse it in other places?”

The answer is: you don’t. Not in the way I was thinking, anyway. Their suggestion is to use either components or template partials.

Tailwind also offers an @apply function, but they discourage you from using it too much: “Whatever you do, don’t use @apply just to make things look ‘cleaner’. Yes, HTML templates littered with Tailwind classes are kind of ugly. Making changes in a project that has tons of custom CSS is worse.”

Using Different Fonts

The second thing I looked for was how to install a new font, specifically Google Fonts. At first, I ran into a couple of issues before I was up and running, but that’s maybe because I was also using Next.js. Ultimately, a part of the documentation and a guide on how to install Google Fonts helped me get unstuck.

My Experience Using Tailwind

Initially, I was slow getting things to look the way I wanted because I was checking the docs for every single style rule, but that’s to be expected. The most common positive point about Tailwind I hear from folks is the speed at which they can build things, so I was sure it was just a matter of learning and getting used to it.

Cons

  • Messy: Yes, it still bothers me how messy and verbose elements can look.
  • Confusing: If one element has too many classes, it takes a bit of time to find what needs to be updated. Utility classes for margin and padding can get lost very quickly.

Pros

  • Quick to Bring Projects to Life: This is for sure the biggest advantage.
  • Copy & Paste: This has got to be my favorite thing about Tailwind. It’s super easy to copy the “recipe” of a component you find, especially from sites like Tailwind Components. I used that a lot to copy styles when building a dashboard, and would just make small adjustments to my liking.
  • Responsive: The syntax for different breakpoints is easy to remember, making it super easy to make things responsive.

Would I Continue Using It?

My conclusion is that I’d definitely use Tailwind again for smaller projects or personal projects to get things up and running quickly. However, I would hesitate to use it in a more complex project or bigger codebase where there are more than two contributors.