Tailwind is great! Or is it?

Published January 21, 2023

At the time of this posting, Tailwind CSS is a controversial subject. While some say it speeds up their development cycle, others have said it slows them down or that it's just a huge mess. In this blog post, we'll be talking about the pros and cons of utilizing Tailwind in different environment, as well as why or why not you should be using it.

To start off, full disclaimer, I used to dislike Tailwind. Not sure what it was but something was throwing me off about it. I'm not sure if it was because I liked being stuck in my ways with utilizing SASS or SCSS, or if it was because I was just too stubborn to learn something new. Either way, I was wrong. Tailwind is awesome! It's a great tool to have in your toolbox. It's not for everyone, but it's definitely worth learning.

So, what is Tailwind?

Tailwind is a utility-first CSS framework. You're probably wondering what the heck that means? To put it simply, it's a CSS framework that gives you a good bit of classes that apply CSS properties to your HTML. Think of it as another way of writing CSS. Sure, it's not the exact syntax, but consider it a shorter way of writing CSS. It's not something I would start off with if you're new to styling the web, but it's definitely something you should learn.

Why should I use Tailwind?

Tailwind to me has been the perfect way to rapidly prototype my ideas. I can quickly put together a design and get it to look exactly how I'd expect it to. One of the biggest struggles I've had is coming up with naming conventions for everything. It's time-consuming, you have to put in a ton of effort, and sometimes you run out of ideas of what to call things! Sure, you can call it a button, but what if you have a button that means something else to the project, what would you call it? For instance, a class named button, but you want this specific button to be red, so you add the class button-red. But then you have another button that's blue, so you add the class button-blue. Now you want, some button that's green, so you create another class called button-green. Any ways, you get the point, you're going to have a ton of classes regardless, to describe a button. With Tailwind, you're describing what something looks like but with the styles. Need a button that's dark red? Boom, bg-red-800. Need that button to have white text? Just add text-white. Again, I'm sure you get the point. Tailwind gives you a large amount of classes to use to describe the component you're building so that you don't have to.

To me, it's a lot easier to describe what something looks like with Tailwind. The reason for this is that you're not naming something based on what it is, you're naming it based on what it looks like. This is a huge benefit to me because naming conventions can be tough. Tailwind is great because instead of coming up with naming conventions, you just describe what the component looks like and move on.

Why shouldn't I use Tailwind?

Tailwind is really awesome, but it's not for everyone. One of the biggest things I hear about Tailwind on a weekly basis is that it's super hard to maintain the styles because it's all inline. That's fair, I'm still not 100% sold on the idea of writing a load of classes inline. Tailwind can be extremely hard to organize due to that nature alone. Another thing I hear about is that it's pretty tough to learn. I can say that it took some time to get used to but after some time, it was almost like writing regular CSS, but inline. Tailwind is over-hyped. It's not something that will completely replace CSS, but it is a great tool to have when you're building out component libraries and rapid prototyping.

Conclusion

In conclusion, Tailwind CSS is a powerful utility-first CSS framework that can be a great tool to have in your toolbox. It offers many benefits such as rapid prototyping and ease of use, but it's not without its downsides. It can be difficult to maintain and learn, and it may not be suitable for all projects. Ultimately, whether or not you should use Tailwind CSS will depend on your specific needs and the requirements of your project. However, it's definitely worth taking the time to learn and evaluate the framework to see if it's a good fit for you and your team. If you're interested in learning more about Tailwind CSS, check out the Tailwind CSS documentation at https://tailwindcss.com/docs.