Tailwind.css – the future of CSS?

New technologies, software and frameworks are at the core of After Digital and to remain relevant it is important to understand how they work and what we can get from them. This ensures our ability to provide the best work for our clients. 

Tailwind has only been around for a short while, but with a recent increase in users, it is now considered a serious alternative to preprocessors and component frameworks. In this blog, we compare this CSS framework to current methodologies in order to determine whether it's time to switch or if we shouldn't fix what isn't broken. 

Image from: Tailwindcss.com

What is Tailwind?

If you’ve ever used Bootstrap you’ll be aware of utility classes, even if you’re not calling them that. Bootstrap is a component-based framework which makes use of these. A good example of using utility classes in bootstrap would look something like this:

<div class="flex align-center">
  ...
</div>

Utility classes are useful because they are modular, component agnostic and reusable. They are normally used in conjunction with other utility classes, so are very useful for quickly styling an element. They take away the need to continually re-write the same styles just to do something as simple as aligning child elements to the centre. 

Tailwind is a “utility-first” CSS framework. Instead of having pre-designed components like cards and buttons, Tailwind has pre-written classes. For example, if you wanted to give an element a grey background, you’d use bg-gray-100. A front-end developer can write far less CSS with Tailwind. 

A side by side comparison

Traditionally written CSS is written like this:

<!-- index.html -->
<button class="button button-primary">
  Click Me!
</button>

/*styles.css*/
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0.5rem;
}

.button--primary {
  background: blue;
  color: white;
}

With Tailwind, there would be no need for a separate SCSS file. Therefore, the markup would look like this:

<!-- index.html -->
<button class="flex items-center justify-center px-4 py-2 bg-blue-100 text-white hover:text-red-500">
  Click Me!
</button>

What are the advantages?

Tailwind has a class name for pretty much anything. Using classes alone, you are able to achieve most designs. Even responsive styles are supported, all it takes is for you to prepend a utility class with the specific screen size you want to target

It’s also tiny. Use PurgeCSS, and Tailwind will automatically remove all unused CSS, so bundle sizes can be really small.

It comes with a Dark Mode feature. You just need to prepend utility classes with the word “dark” and a colon. This is pretty cool as dark modes are all the rage nowadays.

Tailwind also has handy VS Code integration. You won’t have to remember all those class names. The integration comes with autocomplete suggestions, linting, and class definitions.

What are the disadvantages?

You’ll have a hard time convincing purists that it’s a good idea to pollute your markup. Markup should be neat, with meaningful classes and IDs but Tailwind makes your markup virtually unreadable. For example:

<!-- index.html -->
<div class="py-8 px-8 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6">
  <img class="block mx-auto h-24 rounded-full sm:mx-0 sm:flex-shrink-0" src="/img/erin-lindford.jpg" alt="Woman's Face">
  <div class="text-center space-y-2 sm:text-left">
    <div class="space-y-0.5">
      <p class="text-lg text-black font-semibold">Erin Lindford</p>
      <p class="text-gray-500 font-medium">Product Engineer</p>
    </div>
    <button class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">Message</button>
  </div>
</div>

Is it time to switch?

“If you can suppress the urge to retch long enough to give it a chance, I really think you’ll wonder how you ever worked with CSS any other way.”

— Adam Wathan, Tailwind's creator

Adam Wathan clearly understands how against the grain this framework is. However, its growing popularity is perhaps a sign that change is afoot, even if Tailwind’s exact use case may not be that clearly defined yet. Its many proponents say it can be used at scale with ease, whilst others point out that Tailwind shifts the focus from maintaining CSS architecture to maintaining heaps of utility class names instead. Typically, there’s no easy answer.

At this stage, the decision to switch seems to be largely a personal preference. We can see Tailwind being immensely useful for rapid prototyping and solo projects. Whether it’s more useful than component libraries like Ant Design or Material UI stands to be seen.

Regardless, it is encouraging to see other peoples’ approach to seemingly accepted methodologies. We, as web developers, should embrace change—as difficult as that may be in the case of Tailwind. There will always be updates and it is important to increase knowledge around them to find the best option for yourself or the client.

Struggling to advance your company? After Digital is a full-service digital agency that can help your business succeed. Check out our recent work here.