Why I love Tailwind CSS

Some Background

Up until about two years ago, I mainly used Bootstrap CSS to build User Interfaces for websites (mainly in the DNN CMS). I've been working in Bootstrap since 2012 or so and one of the things I prided myself on was that I was able to translate designs into a working website with a high fidelity to the designer's vision.

I never worried too much about performance because the design was the most important thing. They weren't slow-loading websites by any means but I knew I could do better.

I started to look around at what competitors were doing and it seemed like everything was Bootstrap-based and still pretty heavy websites - often with CSS files larger than mine and with (ironically) less design. 

So I knew that trying out a new framework would be something I had to explore. Once I started looking around, I quickly found Tailwind CSS.

With the switch, I quickly realized that I had stumbled into something even greater than I could imagine. Not only did the performance improve (my CSS files were a fraction of the size), but suddenly I was able to make even better looking designs in a fraction of the time because I didn't need to name components, I could easily reuse components and style, the Intellisense was intuitive, and I didn't need to name things. Not to mention the Typography plugin suddenly made all my typography just 10x better than what it was before in minutes.

I won't go into detail about how Tailwind CSS works, but the interesting thing was that it actually is built on a paradigm of utility classes which I was already working with heavily in Bootstrap. I often found myself wishing for more and more utility classes so it seemed like a natural fit. It also changed the way I did things a lot. Instead of using CSS backgrounds, I was able to quickly pick up on using object-cover to create <img /> tags as backgrounds. Instead of relying solely on flex, I learned CSS Grid. These are just a couple of things I learned which improved my User Interfaces.

So performance, design, and maintenance improved greatly.

Suddenly, something that I've always wanted to get better at was within reach: accessibility. Because I saved so much time developing the User Interfaces, I suddenly had way more time to put focus into making sure the UIs were accessible. I brushed up on accessibility by watching talks and reading different articles. I found that making UIs accessible was even easier with Tailwind CSS.

By switching to Tailwind CSS, I became a better developer who made better User Interfaces.

So why do I love Tailwind CSS?

Because it empowers me to achieve my goal of building the best User Interfaces that I can (especially in the DNN CMS). And what do I mean by "the best?"

The best user interfaces are:

1. Beautiful: Visually appealing and accurately represents the brand
2. Usable: Easy for people to understand and use on any device or screensize
3. Highly Performant: Loads quickly for users
4. Accessible: Non-sighted users or users who use a keyboard instead of a mouse can easily use the website
5. Search Engine Friendly: To let search engines easily crawl your website and know what it's about
6. Semantic: Using HTML tags that make the most sense rather than utilizing certain tags for their global styles
7. Maintainable: Fast and easy for me to make updates

Good design, high performance, maintability, and accessibility are not mutually exclusive. And by simply chasing after performance, I was able to improve on everything else. I hope that gives you some context into why I love Tailwind CSS.