6 Reasons to use Tailwind CSS in your next project

Tailwind CSS has received a lot of attention in the last couple of years, for both good and bad reasons. It seems like the community is divided in to those who often feel strongly about Tailwind’s place in the dev community. As I’ve used Tailwind in a project at work recently for the last few months, I think I’m able to chip in and hopefully help someone decide if it’s right for them on their next project.

What is Tailwind CSS?

Before jumping in to my thoughts on the benefits and drawbacks, here’s a quick overview of what Tailwind is. Tailwind is a “utility first CSS framework” which enables you to style elements using only HTML classes.

<div className="bg-sky rounded-full shadow p-5 text-white">
  &#10003;
  <span className="ml-2">Nice blue</span>
</div>

The above snippet generates the following component with Tailwind CSS installed:

This is possible because Tailwind has literally thousands of CSS classes made for each of the styling properties above. For example, bg-sky is the class for the style background-color: skyblue;, and p-5 is the class for the style padding: 5em. If you refer to the Tailwind docs, you’ll see all possible, pre-built classes for padding.

The reason Tailwind is so powerful though, is because it uses PostCSS to generate what ever classes you need for your project, aside from the already existing classes.

Let’s say you wanted to make a button which is Cadbury purple instead of sky blue. You’d add your custom colour to a Tailwind configuration file (tailwind.config.js):

module.exports = {
  theme: {
    colors: {
      "cadburys-purple": {
        DEFAULT: "#550f9d",
      },
    },
  },
}

The back in your HTML (or template like jsx, pug etc…) you can use the colour:

<div className="bg-cadburys-purple rounded-full shadow p-5 text-white">
  &#10003;
  <span className="ml-2">Dairy Milk</span>
</div>

As the config file creates the colour independently of any other CSS style, it can be used to colour background, gradient and text because the Tailwind post processing generates all these classes for us! This will output:

This ultimately means you don’t need to write an much (if any) css in traditional CSS or Sass files.

Why I think Tailwind is great

Here’s a few reasons I think Tailwind is worth picking up for your next medium to large sized project:

Easy to learn and adopt across a team

Introducing a new styling system to a team, or introducing a team member to an existing styling system can be a challenge, especially if the styling system takes a lot of practice or learning from team members. If you’ve ever used BEM for example, you’ve probably experienced an onboarding step which can be extensive if the team’s CSS is fractured or structured poorly.

With Tailwind, a developer is only required to learn the basics of how Tailwind works, and the rest is a case of remembering what a CSS property is called with Tailwind - such as w-full = width: 100%;. There’s no searching through a load of CSS files to find what could be a few references to the same CSS classes.

Much easier to keep the Tailwind approach implemented across site

With other CSS styling approaches, it’s possible for team members to go “off-piste” and stray from the existing styling setup a little bit. With weaker CSS approaches like a semi-structured nested SASS file, it’s very easy for a new or junior developer to introduce their own way of doing things. Although this sort of thing should be caught by a senior dev or manager before being a problem, Tailwind stops the issue.

Tailwind’s very nature is to be ubiquitous across any design system because styles are directly added to elements, so that higher level of abstraction which usually exists between HTML/JSX and a CSS/SASS file for example, is no longer there.

The configuration is fantastic

One of the first things you’re introduced to when following the docs is how to use the configuration file tailwind.config.js. This is the part of Tailwind which sets it apart from traditional home made utility driven CSS (i.e. a collection of classes without a pre/post processor). The config with Tailwind is great because everything unique to your project is specified here, and is available throughout all of the Tailwind classes. This includes:

• Fonts
• Font sizes
• Colours
• Gradients
• Box shadow variations
• Custom width and height properties
• And much more…

This means any new developer can look here and see everything which makes the project unique - all in one place. Traditionally, colours can be added anywhere in a sea of CSS files, much like pixel pushing with random px values for margins, padding and font sizes. There are many styling solutions out there to alleviate this problem, such as CSS imports and global styling, but with Tailwind all this comes out of the box and it’s pretty much impossible to steer away for this convention with a few simple rules in place with a team (i.e. don’t write your own CSS files).

Component based development goes hand in hand with Tailwind

One of the benefits of traditional CSS is that a style can be declared in a file at the top of a page and all elements matching that style will use this style. If there are 5 buttons down a page, for example:

<style>
  .button {
    background: red;
    color: white;
  }
</style>
<div>
  <button class="button">Button 1</button>
  <button class="button">Button 2</button>
  <button class="button">Button 3</button>
  <button class="button">Button 4</button>
  <button class="button">Button 5</button>
</div>

All buttons on the page will conform to the style of a red background with white text. With Tailwind, this can start to be a pain because you’d need to repeat the Tailwind classes to get the same result:

<div>
  <button class="bg-red text-white">Button 1</button>
  <button class="bg-red text-white">Button 2</button>
  <button class="bg-red text-white">Button 3</button>
  <button class="bg-red text-white">Button 4</button>
  <button class="bg-red text-white">Button 5</button>
</div>

This can be a huge problem if the buttons get quite complicated with their styling.

Tailwind relies on a modern web project setup with the use of components. Wether this be HTML components, React, Vue, or anything else, the act of re-using components means a style can be applied inside a component rather than outside, so the button setup above might look like this:

const Button = ({ text }) => {
  return <button class="bg-red text-white">{text}</button>
}

;<div>
  <Button text={"Button 1"} />
  <Button text={"Button 2"} />
  <Button text={"Button 3"} />
  <Button text={"Button 4"} />
  <Button text={"Button 5"} />
</div>

Transferring components over to a new project is easy

You’ve probably been in a situation where you need to re-use the same button, header, or card across multiple sites. This is usually quite easy - you copy over the JSX or HTML file, and copy over the corresponding CSS or SASS file. This is best case scenario usually, as it could be that your style file also contains styles which are not needed (or missing some that are needed), or the component is actually split in to multiple sub components, or there’s some external data or props which is needed to get the styles to work as intended. So many reasons why re-using components might not be as simple as you would like.

With Tailwind, the styles are all already there by default if you have a standard Tailwind installation and your trusty config file. You can even standardize your styling config and import your config from a Github account or NPM package to ensure there’s truly only one file feeding multiple sites.

VS Code CSS IntelliSense

Finally, the folks over at Tailwind have created a VS code extension for CSS IntelliSense, which uses your config file and a bit of magic to pull through all possible styles as you’re typing in to your components: