Tailwind CSS. Love It Or Hate It

Introduction

If you are a front-end developer, you have surely used or heard about Tailwind CSS, a framework that allows you to speed up the development of web applications related to CSS (Cascading Style Sheets). It follows the utility-first pattern. What does this mean? By simply adding classes to our HTML elements we can modify their behavior without having a specific one to manage certain parameters. This way, a class will normally be related to a single property clearly linked to its name (flex, block, text-white, etc.).

All of this makes application development much faster, but it can overload our code with too many tags and even make it difficult to read.

But do you really need Tailwind CSS in your projects?

Vanilla CSS

To be a front-end developer, one of the parts about which we must have extensive knowledge and fluency is the one related to styling, despite the fact that many people think that it only manages the aspect of an application. Using CSS we can handle terms as diverse as animations or complex state changes of elements that are not strictly related to the look and feel. If we use preprocessors like Sass, we can programmatically add logic to dynamically generate styles and classes that help us, something that can be very useful if we want to create our own design system. In addition, modern features such as CSS custom properties or color systems like oklab will help make it more customizable and friendly.

But if CSS is so powerful and allows us to do so much, why are frameworks like Tailwind CSS so used?

Agility To Power

When we develop software for clients we know that the delivery of value should be as fast as possible and sometimes deadlines are reduced to minimum quantities. For this reason, it is always appreciated to have tools at hand that allow us to advance our tasks quickly and effectively. Regarding the prototyping of our applications, we have tools such as Bootstrap or Tailwind CSS. The first one would follow the basis of many others, offering classes that make easy the management of texts, colors, margins, paddings and layout distribution, among many others, in addition to having a variety of ready-to-use components such as buttons, menus or drop-downs simply by applying the specific classes. But the approach offered by Tailwind CSS is a game-changer and can help you create a highly configurable layout system quickly simply by adding classes that deal with properties atomically.

One of the things I have liked least about Tailwind CSS since its release is the dependency on JavaScript for its configuration. I think that a tool focused on managing CSS should be as close as possible to the language itself. That is largely solved with Tailwind CSS v4. It will no longer be necessary to have a configuration file to edit or create classes, manage which project files should be checked by the tool to analyze the classes used and decrease the project bundle, etc. Now we can edit and create new variables simply using CSS custom properties, something identical to what we would do with vanilla CSS. The analysis of the project files will be done automatically without any additional configuration.

With the new version it will simply be a matter of installing and using. CSS management will be the same as what we are used to. Simply add the classes to our HTML and deliver value.

Use Cases

But should I really use it in all my projects? It depends.

For small projects such landing pages or similar, I would not have any doubt. Yes. In most cases, this is something that will require a quick delivery time and will perish once its purpose has been completed.

For medium or large sized projects? That's where the doubts arise. The factors we should take into account are more extense. What deadlines are we talking about? How many developers will work at the project? Do we have enough muscle to create our own design system without sacrificing sensitive time to achieve the main goal of the project?

Not long ago I was part of a project with Vue.js that divided its front-end team into developers dedicated to the prototyping part more related to HTML structure and styles and those more dedicated to the implementation of the logic. They had generated their own style guide with a collection of classes that made the layout of templates and creation of components easier in an agile way once assimilated. That can lead to a problem: the learning curve. In the end, if you create something of your own, there will always be a process of understanding by all team members and a hard task of documentation and maintenance that not all companies can afford.

If we use a tool that already has its own documentation and many developers have already used, we will have saved that time to invest in other tasks. And we all know that in projects time is money.

Actually both approaches are valid depending on many factors and in the end the decision will be made by those responsible for the projects taking into account what has been mentioned.

Knowledge Base

Regardless of whether we build our own design system from scratch or use tools like Tailwind CSS, a developer who wants to have a strong front-end profile should be able to achieve the fisrt one in order to be able to use even better tools that help speed up work on certain projects.

So what do you think? I encourage you to try both!