Why you should use tailwind for your next project

Over the last 12 years I've been building Single Web Applications (SPAs). I've seen how the CSS landscape has changed, from the introduction of SASS, BEM, Bootstrap like frameworks, css modules, style components, etc.

All of them trying to bring some sanity to the CSS madness! Definately some improvements over the years, but still all of these solution fail at some point.

In the summer of 2018, I learned about a new utility framework called tailwind, the approach is completely different from other solutions and after using for over 2 years in production products, I'd like to share my opinion on the framework and why I prefer it over other tools.

Consistency

It's very difficult to write consistent spacing, fonts, colors, etc. Sure, you can use variables in SASS/LESS, themes in tools such as Styles Components but the truth is that keeping consistency is extremely challenging, specially when new developers are added to the team, learnig your own solution to this problem is difficult and prone to mistakes.

With tailwind you don't write CSS, you are forced to use the existing classes, for example in styled components you could do something like this (Snippet extracted from the documentation):

const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;

  /* Color the border and text with theme.main */
  color: ${props => props.theme.main};
  border: 2px solid ${props => props.theme.main};
`;

Notice how the color and border are using the theme, but the margins, paddings and everything else are hardcoded values! This is not ideal for consistency and is very easy for a dev to just start hardcoding values instead of using the existing theme.

In tailwind, you don't write CSS, you use the existing utilities to compose the final result. This will force every single dev to use the existing classes. Keeping everything consistent accros the codebase.

<button
  class="text-lg m-8 p-4 rounded-sm text-default bg-primary"
>
  Send
</button>

As you can see, all those classes have predefined values, keeping things consistent at all times!

Naming things is hard

We can all agree that naming is super difficult, we tend to spend way to much trying to come up with a great name. With tailwind you don't need to worry about that anymore!

Adam Wathan has taken the time (with the help from the community) to name everything for us. This is a great boost in productivity because we don't need to spend time thinking on naming classes anymore

In addition, once you get used to the naming convention, it feels like you have super powers! When working between different projects the naming conventions is the same, values might be different but you can rely on what you already know!

Use only what you need

One of the main problems with CSS is that, when removing classes on the node elements, sometimes we forget to clean up the CSS, we will eventually get a huge CSS bundle with so many usless CSS on it.

CSS modules and Styled Components provide a great solution for this, by dinamically build the bundle based on the imports you have in your JS files.

Tailwind on the other hand is not dynamic, all classes will be added to your final bundle and by default it take about 2mb of CSS. However, with the help of purgecss you can easily remove all the unused styles and bring your bundle down considerable!

We used tailwind for the Coding Coach website and blog, and the final bundle is only a few kilobytes that we even added all the styles inside the main HTML file 😂

Extendible

Tailwind is very easy to extend and customize to your own needs. You can customize all the values throug a config file, either you add new values to the existing configs or replace the current ones.

There's also a plugin system in case you want something super custom or you can even use several directives to write your own CSS while still using the values defined in your configuration files, for example:

@screen md { // targeting medium devices
  .my-new-class {
    @apply px-4 text-default; // Accessing existing utilities 
  }
}

While tailwind will force every developer to use the existing classes and by so giving you consistency, you can also define your own styles and use everything you have available.

This level of flexibility makes tailwind so useful and powerful.

Mobile first

Nowadays is required to make your app or website responsive, tailwind is a mobile first framwork, making elements responsive is super easy.

You can target each style for a given screen size, for example:

<button class="text-sm md:text-lg lg:text-2xl">
  Send
</button>

In the previous example, the text will be small for mobile devices, large for tablets and extra large for desktops. That's all!

Community and Documentation

When jumping into a new technology or tool, it's important to get some help when you get stuck on something. Documentation and community is super important for a tool to succeed.

Tailwind comes with a great documentation with plenty of examples, in addition the community is super friendly and responsive. The discord channel is very active and you will get the help you need.