What Makes Tailwind CSS Great

Do presumptive and bloated UI frameworks irk you? Here's a utility-first alternative you should know about.

Created on March 9, 2021.

A History Lesson

My first paid gig as a programmer was in 2013, wherein I developed forms with HTML, CSS and JavaScript. There was also the server-side handling to go along with it, which I wrote in PHP, and, later, other languages including C# and Java. Around the time I started, adoption of Node.js and npm reached critical mass, as did bundling, minification, and normalization. Frontends were preprocessed as much as possible, often picking up the browser's slack with clever scripts. This productive mentality culminated in static site generation tools like Eleventy.

Some saw the trend as an opportunity to formalize collections of web components, as in pre-styled and interactive buttons, modals, "hamburgers," etc.

These web components were marketed alongside monolithic JavaScript frameworks, principally React. What is React? It's the most popular way to obfuscate browser JavaScript APIs, in the same sense that web components generally obfuscate CSS. I have no love for monoliths as a result of their opaque and overreaching nature. To the contrary, frameworks such as Tailwind CSS facilitate a healthy working relationship with CSS, rather than prescribe dictation from an impotent abstraction lurking in its forerunner's shadow.

Utility-First

While there are official Tailwind UI components, these are, in essence, examples of idiomatic Tailwind CSS usage for common use cases. They're not meant to be a replacement for working with CSS, instead intended as a guide for doing so. This differs from other component collections where change and adjustment from the norm are quite painful.

Thankfully, Tailwind simplifies and accelerates working with CSS by training users to, well, use it as intended. It's okay to have some inline styles, but generally these styles should belong to classes as to mitigate redundancy. Tailwind brands itself "utility-first," furnishing an adequately-named class for each corresponding style. Therefore, Tailwind instills the good practice of using and composing classes.

Here are examples of such style-class equivalences:

  • margin: 0.25remm-1
  • flex: 1 1 autoflex-auto
  • visibility: hiddeninvisible
  • background-color: #fffbg-white
  • white-space: prewhitespace-pre

Based on those examples, I bet you can figure out what this means:

class="bg-gray-900 pb-10"

With the help of the aforementioned preprocessing, it's also possible to compose classes in another like so:

body {
@apply antialiased text-gray-500 bg-gray-900;
}

This is the core of what I love so much about this framework, but that's not all.

Other Features

The user can configure spacing and the color palette to their heart's content, although the defaults are nice. Breakpoints are as simple as prepending a size at which they activate, such as md: (medium), to a class. There are some interesting new features as of Tailwind CSS v2.0, including utilities for focus rings, gradients and animations. Tailwind CSS packs in a lot of features, so much so that it can be quite hefty if you don't optimize for production. Remember, there's never a good reason for including unused styles!

Conclusion

If you're just getting started, you may want to check out my Eleventy template, 11r, that is dependent on Tailwind. Playing around with that template may help you learn the framework, and maybe some other stuff too. Regardless, definitely visit the official docs if you're interested in learning more. After all, this website was built with Tailwind CSS! If it's good enough for me, it must be good enough for you, right?

Next

What Makes Dark Reader Great

Previous

What Makes Visual Studio Code Great


By using this site, you agree that you have read and understand its Privacy Policy.