Why We Have Now Added TailwindCSS to Our Stack

Tailwind CSS is a versatile CSS framework that doesn't enforce a specific structure or method on your project. It consists of utility classes that can be applied flexibly to any HTML structure without being restricted by the framework's opinions.

For a long time at MarsBased, we dismissed the use of TailwindCSS for our front-end projects. The lack of its own component library along with the absence of a design system led us to conclude that TailwindCSS was not the best option for us.

Until now. Let's see why.

Main Features of TailwindCSS:

• Utility Classes: TailwindCSS offers an extensive library of utility classes that can be combined to apply styles. For example, text-center to center text, bg-blue-500 for a blue background, and p-4 for 4 units of padding.
• Customization: It is highly configurable. You can customize or extend Tailwind through a configuration file (tailwind.config.js) to adapt the utilities to the specific requirements of your project.
• Responsive Design: Includes built-in support for responsive design, allowing you to apply different styles based on screen size using variants like sm:, md:, lg:, etc.
• Components: Although it does not include pre-built components, you can build and reuse components from the utility classes.
• JIT Mode (Just-in-Time): TailwindCSS now includes a JIT compiler that generates styles on demand as you use them in your HTML, resulting in smaller CSS files and faster build times.

Advantages:

• Flexibility: The utility-first approach allows complete customization and avoids the need to override predefined styles.
• Efficiency: Reduces the amount of CSS you need to write by providing predefined classes for multiple properties.
• Reduced Overhead: The JIT approach and the elimination of unused styles result in smaller style sheets.
• Simplification: Helps simplify the abstraction of CSS, benefiting developers without deep CSS expertise.

Disadvantages:

• Learning Curve: It can be a significant paradigm shift for developers accustomed to frameworks with pre-made components.
• HTML Readability: The inclusion of many utility classes in the HTML can make it harder to read and maintain.
• Lack of Own Design System: Does not have its own design system without prior configuration, which may require additional work at the start of the project.

Why we are using TailwindCSS now

For a long time, we tried using Tailwind in closed environments and side-projects, to give it a try. Time and again, we were not convinced by the reasons above, mainly, so we decided against using it. I believe we first tried it in 2018, and have followed its evolution closely ever since. Considering it was first released in 2017, it was pretty early on!

Since its inception, TailwindCSS has evolved into a “syntactic sugar” language, making extensive use of PurgeCSS and allowing for much more complex utilities that are directly eliminated when not used, thus going against our company culture of "less is more".

A couple of years ago, we started using third-party component libraries such as Flowbite, PrimeReact, or NextUI, which have filled the space left by TailwindCSS. By using them, we have found their strengths and weaknessess too, and while some of them are pretty comprehensive and great to use, sometimes they are not enough for complex projects of the size we usually work on.

Therefore, TailwindCSS has become a good choice for projects where React is used and big teams work together at scale. Both because of React's own componentization that fits well with Tailwind's utilities and because these libraries meet many of the common needs of projects.

This is why we have recently started to use Tailwind more openly in our projects, after many years of testing it and tinkering with it in some client projects where it was already included, so we learnt the ropes in real environments.

TailwindCSS is perfect for a "utility first" approach and this is where we believe its potential lies. Combined with simple configuration and its system of functions and directives like @apply and theme, it allows us to use its utilities to create reusable entities and components needed in the project, such as titles, buttons, form elements, etc.