Tailwind after a month

October 10, 2020

Writing CSS can sometimes be a mess. As projects grow larger, the CSS styles can become quite hard to maintain - from naming things, trying to align content perfectly and figuring out which selector overrules your new styles.

As a result, people have come up with many ways to make it easier for us. Some like to use CSS-in-JS. Others are vigilant about using BEM naming to make sure their styles are named descriptively. Frameworks such as Bootstrap & Tailwind are helping by providing a pre-defined API you can use to make your designs come to life.

I was recently excited to hear that I got the chance to use Tailwind in one of my work projects. I have been meaning to learn more about it as I have heard good feedback within the community and online channels.

This post is a short summary of all the things I got to learn about Tailwind during the first month of using it and what my experiences were like.

What is Tailwind?

Tailwind promotes itself as a "utility-first CSS framework for rapidly building custom designs." The philosophy of Tailwind is to provide an API (utility classes) which you can combine to go from design to implementation. Using these classes in your HTML markup has another effect: all your styles are visible from within the markup itself. What do I mean by that? Let's look at an example:

See the Pen Tailwind example - Rounded Image with shadow by Patrick Ahmetovic (@patriscus) on CodePen.

The example shows an image with a rounded border and box shadow applied. The image is contained in a div that defines padding around it.

As you can see, not a single (custom) CSS rule was needed. Everything was achieved by using the utility classes Tailwind provides. We are able to get a sense of how the element will be styled just by looking at the HTML.

Tailwind offers many features that make this possible: built-in functionalities for responsive design, pseudo-class variants and other things. Please make sure to check out the docs to get a sense of all the cool things Tailwind can do.

Alright enough about Tailwind. How was my experience?

Pros:

It's customizable.

Tailwind has been built with customizability in mind. As of now, I was able to easily change spacing values, font families or colors with ease. The great thing about this is that Tailwind does not restrict you in any way. Although it provides (in my opinion) very sensible default values, you are free to change them as you please.

It establishes a rule set for both developers & designers.

With the power of customizability, Tailwind (or more so the Tailwind config) is great at being the source of truth for your designs. After collaborating with designers, it is easy to transfer the properties & values agreed upon (e.g. spacing) to Tailwind. This helps tremendously when implementing designs as all the values (ideally) are in the pool of utility classes. If, for whatever reason, one of those values is modified all changes are immediately visible in all parts of your application. As an example, let's suppose you change the font size value for xl from 1.25rem (the default) to 1.35rem. Now every element you have applied the text-xl utility class will automatically use your new value.

No naming. No problems.

Although I initially thought that this aspect will only play a minor role for my development workflow, I have grown to love not having to come up with well-named CSS classes all the time. While previously I have enjoyed using BEM naming, I still had to regularly question myself on how I should name certain elements. Tailwind removes that part entirely, making you focus more on what really matters: the styles to use.

Specificity.

As projects grow bigger, maintaining CSS styles tend to also become harder. During the first month, I could also observe that another advantage of using Tailwind is that it requires no effort to overwrite (or add) new styles. In a perfect world, developers wouldn't have to address overly specific CSS selectors which overrule newly applied styles. Unfortunately, I don't live in this perfect world. In the past I have seen selectors constantly clashing with my styles, thus leaving me to add other overly specific styles. While this is not ideal, I am happy to see that Tailwind (so far) removed this as each element is only composed of the utility classes they need.

Cons:

One off styling.

One of the biggest advantages of Tailwind is that you can craft a well defined configuration upon which your utilties are generated. However, this is also part of one of my biggest pain points - one off styling. Sometimes the design requires to go out of bounds with the options that are laid out to you. Sure you can discuss to add them in the config but sometimes that is also not the best option, as this style might only really be needed in that specific case.

In Adam Wathan's great talk on Tailwind best practices, he mentions that using inline styles can be useful to go around these obstacles. In most cases this tip was already enough for me and I was able to happily move on. In other cases, it still didn't feel quite right (keeping in mind that this is subjective). As an example, inline styles do not support media queries which you might need for one off cases.

Your markup may get polluted.

Moving all your CSS rules from a stylesheet to the HTML markup naturally makes your class="" attributes grow quite large, especially when the element needs a lot of those to be responsive and look good on all devices.

I am not bothered much by it. However, I can understand if other developers may find it ugly or too "noisy".

Final thoughts

I have been using Tailwind for a month now. So far I have enjoyed the process and I am excited to see how using this framework will scale as more and more of my projects will use it. I would recommend everyone to spend little time playing around with Tailwind and see how well it integrates with your projects.