How Tailwind has changed our development process

Tailwind CSS is a utility-first framework that provides predefined classes for building responsive, customisable designs, eliminating the need to write custom CSS. Instead of traditional stylesheets, developers apply utility classes directly in the HTML, streamlining the process of creating complex layouts.

Tailwind has significantly boosted our productivity and helped align design with development, making our projects run far more smoothly. I first came across it a few years ago, but initially, I dismissed it as just another CSS framework, much like Bootstrap, which I had previously used. The idea of cluttering HTML with utility classes didn’t appeal to me and seemed unmanageable for a team of developers.

For years, I’ve been a staunch advocate of Sass and BEM, and in many ways, I still am. For large-scale websites with numerous components and multiple developers, Sass and BEM can work very well. They bring order to the chaos by providing a structured approach that allows developers to quickly understand a codebase.

However, as projects grow and more developers contribute, writing CSS this way becomes increasingly challenging. I often found myself creating new BEM classes for even the simplest components, repeating similar styles across multiple elements. My initial workaround was to create my own utility classes for margins, padding, backgrounds, and text, but in the end, I was replicating what Tailwind already does. Then there’s the ever-present challenge of naming components. I like this quote by Geoff Graham, it may not be true all of the time but it outlines in a humorous way the time cost of having to name things.

This is where Tailwind has shifted my approach to CSS. The utility-based method removes the need for naming components. You essentially write your styles on the fly within your markup, and once you become familiar with Tailwind, it significantly speeds up front-end development.

That said, there are cases where this approach isn’t ideal. When a component becomes overly complex, with 20+ class names spread across multiple elements for example, it can be hard to maintain especially for new developers joining the project. In these situations, I still prefer to use BEM and explicitly define styles as it makes these components a little more maintainable for the future.

One of the most impactful changes since adopting Tailwind has been how it has influenced our design process. After implementing Tailwind, our design team reviewed their approach and transitioned to designing with Tailwind in mind. Now, everything from spacing and typography to colours is set up in Figma using Tailwind's declarations. So when the designs reach the dev team, we can directly reference them while coding – another major time saver.