Benefits I got from TailwindCSS
Tags: tailwindcss, css, utilityfirst
Published: 2020-12-23 16:53:28

Since the early days of TailwindCSS I have learned lot's of useful stuff. Using it helped me to become more **productive**. So, today I would like to share how I got so much benefits from TailwindCSS.

## Early experiments and the reason to choose utility-first CSS

In 2010s I was learning web development and came across Bootstrap. I was amazed how this framework thing helped me to build web UIs quickly. However, it was a pain for me to customize it and behave it in the way I like. Overriding existing styles felt so wrong and hard to manage.

Then someone told me that I can use SASS or LESS to easily customize and manage Bootstrap. Unfortunately, these preprocessors were also another thing to learn and they were hard for me (yeah I am bit lazy😅).

So I gave up on web-design!

But one day, I came up with the [article](https://adamwathan.me/css-utility-classes-and-separation-of-concerns/) that pointed out my pains on using Bootstrap like frameworks. This article itself was so educational that I learned about BEM, CSS Zen Garden etc.

Adam Wathan the creator of TailwindCSS demoed his new approach called "utility-first CSS" and mentioned his brand new framework. I was sold for this and quickly hit the link and learned the basics.

After using it for day or two I found myself home and started to enjoy the experience. I realized that I even did not write single line of CSS and that was awesome.

## Magic documentation

[The documentation](https://tailwindcss.com/docs) of Tailwind is so informative and easy to follow. After a year of using the framework I noticed that I was learning lot's of things about CSS. For example, I was not able to learn flex-box from any tutorial or an article. Fortunately, Tailwind's "flex-box API" was so simple and documentation included what CSS rules applied for the given utility. Naturally, these factors helped me to learn how flex-box works.

Aside from learning advanced CSS stuff, I was discovering interesting CSS features like `object-fit` and `object-position` and and using colons in class names like `.hover\:bg-red-100 {...}`.

In general, the documentation was teaching me both the framework and CSS.

## The science behind every utility

Following [Adam](https://twitter.com/adamwathan) (the author of the framework) on Twitter was a best decision I have ever made. He always posts about useful stuff. Tweeting about why he added a new utility or a feature to the framework is my favorite thing.

When, he added transition and animation utilities, he did and extensive research on animation and even created custom easing functions.

{% twitter 1116846189272391680 %}

He did the same with typography utilities by questioning the best line height, font-size etc.

{% twitter 1104393703337058305 %}

Every new feature he added had a strong research behind it and even top developers mentioned how smart decisions baked into the framework codebase:
{% twitter 1338955637858861056 %}

## Adopting design skills

Using Tailwind also helped me to give my design more modern and user friendly look. [Steve Schoger](https://twitter.com/steveschoger) the design man of the Tailwind team showed the best ways to build modern and functional design with [simple tips](https://twitter.com/i/events/935538902240198656).

## Open source = dream job

The team behind the framework also proved that it is possible to make a dreamy job by doing quality open source work. Adam's article about how he [built a multi-million dollar business](https://adamwathan.me/tailwindcss-from-side-project-byproduct-to-multi-mullion-dollar-business/) by open source work is really inspiring.

## Try it yourself

You will realize that more you use it, more you like to build things with it. I got so many things just by trying Tailwind and I recommend you to try it.

Also don't forget to follow Adam and the team on Twitter. You will never regret. I promise!