Tailwind seems to cause polarising reactions: some people love it and others don’t want a bar of it. So I thought it would be good to write about my experience with using it.
A couple of years ago I was busy introducing Elixir/Phoenix/LiveView to a company where I worked. It was a new stack for us, selected to implement a new product. As part of the process, I had to figure out the best way to work with CSS.
Tailwind was recommended as the default option for Phoenix. However, I was initially sceptical of Tailwind. I just couldn’t understand the value proposition of having a shorthand that basically corresponds one-to-one with individual CSS properties.
Nevertheless, one consideration eventually convinced me to go with Tailwind, and that was the fact that Tailwind-supplied shorthand provides a constrained design language for the team, thus helping maintain UI consistency across the whole base. The main thing that Tailwind allowed us to avoid was the application of inconsistent, arbitrary values in different places: things like people slapping
padding-top: <whatever>px with different values of
<whatever> on different parts of the UI.
We were also able to generate our Tailwind theme from a set of parameters specified by a company-wide design system, helping ensure consistency at a higher level (across products) as well.
A couple more advantages became apparent later, as we built out the product and used Tailwind extensively:
flex items-centeror whatever became second nature. Other people on the team reported a similar experience.
All the advantages I listed are laid out on the Tailwind home page as well, and the motivation is similarly explained in the post that introduced Tailwind.
As a result of my experience using Tailwind for a product built by a team over a couple of years, I became a convert and will now reach for it for any new project. Recently I tried it out with React and Rails and it worked just as sensibly as with LiveView.