Abstract

This article aims to present the benefits of using the open source Tailwind CSS framework, that is, to present the reasons for using it, both for the day to day of developers and for the result of the developed software. The information presented in this article was obtained through research carried out in the documentation of Tailwind CSS itself and also based on feedback from developers who used the framework.

Introduction

Tailwind CSS is an open source CSS framework whose main characteristic is to be utility-first, allowing the creation of simple or complex layouts quickly and efficiently, without the need to separate the stylesheets. Unlike a simple inline CSS, due to the way your classes are written following utility-first, there is not a great accumulation of information, leaving your code more compact and the project as a whole more organized.

Development

Unlike other CSS frameworks out there, Tailwind CSS does not offer ready-made components. On the other hand, its easy use means that you have complete freedom to build your own components, not being limited to certain pre-defined styles. In addition, as previously mentioned, due to its semantics, creations are made quickly and practically, making development more agile.

Below you can see the difference between creating a popup using standard CSS and using Tailwind CSS:

Default styling:

Styling done with Tailwind CSS:

Tailwind CSS offers:

• a pre-defined design system, which facilitates the creation of your interfaces;
• an easy creation of responsive design, which is done along with your stylizations and in an extremely simple way, without having to resort to media queries;
• the use of events like “hover” or “focus” together with their common styling, making the code, as a whole, more grouped;
• reducing the need for constant class naming — which is a recurring barrier among developers —.

In the image below we can see the responsive styling of an image, where it has a width defined by default, but that increases on devices with higher resolution:

The screen size is referenced by a prefix that is defined by a pattern, which can be: “sm”, “md”, ”lg”, ”xl” or ”2xl”, where each of these receives a wide media-query minimum. The “md” presented in the image, for example, is equivalent to a media query of at least 768px.

💡 It is important to remember that these sizes are also customizable, giving the developer complete freedom.

As said before, events are also done inline, but in a very simple way. In the following example we have a button that receives a stronger color when the “hover” event and the “active” event occur. Furthermore, the outline property is removed from this button and the ring property is added when the “focus” event occurs.

Regarding code maintainability, the Tailwind CSS documentation mentions that the biggest problem when using a utility-first framework is the repetitive management of these utilities. The Tailwind CSS team claims that this issue can be easily resolved when using reusable components. That said, Tailwind CSS turns out to be a very good framework when used in conjunction with React, for example, given that its approach revolves around reusable components.

In addition, the documentation also states that maintaining a project that uses CSS with utility-first is very easy, as the refactoring of HTML is simple compared to CSS. Large companies that are seen as a reference, such as GitHub, Netflix and Twitch, for example, are already developing their projects in this way.

The framework is constantly being updated. With each new version a bug is fixed or a new feature is added. Its documentation, despite being only in English, is very well described, making the insertion of new users very easy.

Because it's open source, the Tailwind CSS team also seems to be very open about opinions and new ideas. In their social networks, the team is also in constant contact with the developers who use the framework.

Conclusion

With this, it is possible to conclude that the use of this framework on a daily basis is capable of bringing several benefits, not only for the developers who use it, but also for the software, being able to offer quality and speed in their development. Tailwind CSS is easy to learn thanks to its complete documentation, it is extremely useful in creating interfaces with responsive design and, finally, code maintainability with Tailwind CSS is a task that — as we have seen — should be done in a simple way and without any complications.

References

https://tailwindcss.com/docs

https://www.codigofonte.com.br/artigos/por-que-usar-tailwind-css

https://dev.to/pedrovrima/por-que-voce-deveria-dar-uma-chance-ao-tailwind-css-hjj