Introducing Tailwind at Cambridge University Press

Having used Tailwind in my personal projects, I was already a convert of the utility first approach. When I was given the opportunity to lead a new project at Cambridge University Press, Tailwind was the first tool I reached for.

In this post, I'll discuss why and how using Tailwind worked out for us.

The failed promise of CSS Frameworks

Throughout my career, I witnessed teams struggling to maintain web applications using UI frameworks such as Bootstrap, Foundation and Material UI.

The initial benefits didn't last long, and their web applications eventually ended up the same sorry way.

Productivity slowed as teams struggled to try to make sense of spaghetti codebases unable to deal with yet another specificity war or struggle to update the UI kit they had built upon.

Teaching the team about Tailwind

As this would be the first project in the organisation to use Tailwind, I wanted to gain my colleagues' support. Having experienced the pain of using existing solutions, they were open to an alternative approach.

So I used our developer meetings to explain how and why I planned to use Tailwind.

I'm currently writing up what I presented. In the meantime, this is the link to the repository I created for my Tailwind Talk

So how did choosing Tailwind work out for us?

The developer experience and low learning curve of Tailwind, made it easy for people to learn it's just surgery syntax on top of CSS with well thought out conventions.

By being able to specify constraints in the Tailwind configuration file, it was straightforward for the team to build components that followed brand guidelines.

It was simpler to understand what was going on in pull requests as we no longer had to match class names in markup and style in separate files, especially for responsive design.

Using utility classes in template files made collaboration easier with everyone from design to accessibility experts during pairing sessions.

The site looked incredible and knowing we only shipped the CSS that was actually being used helped us build a performant web application.

Using Tailwind was a success for the project, and team members loved using it.

How do I know this? They went on to use it on projects they led.