Tailwind CSS is a utility-first CSS framework that receives a generous and equal amount of affection and hatred. When I first used Tailwind on a proje

An Honest Look at Tailwind as an API for CSS

submited by

Style Pass

2022-01-14 14:30:11

Tailwind CSS is a utility-first CSS framework that receives a generous and equal amount of affection and hatred. When I first used Tailwind on a project, it was hard to know if I was making the right decision after searching for advice, and I had many questions.

Luckily, after employing Tailwind on several projects, I have found some best practices that can lead to readable CSS enjoyed by both designers and developers.

First off, you may be asking yourself, why should we use Tailwind? I’ve seen various arguments why someone (especially someone new to CSS) should steer clear of Tailwind.

In theory, I understand the apprehension. Suppose you’re not familiar with the concepts behind CSS just yet; it might not make sense to reach for an abstraction of those concepts. But, I think there is merit in investigating what becomes more straightforward when incorporating Tailwind into a project.

You now only need to recall a single CSS class instead of a key-value pair; for instance: flex vs. display: flex. You’d be surprised how helpful this is during the debugging process. You can try out a bunch of different CSS properties just by swapping classes on the DOM element. And because Tailwind has defined the CSS classes for you, you only need to focus on the DOM elements themselves. The benefit here is that you can quickly sketch in CSS, in the inspector, or right in your HTML.