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 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 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 (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.
Adam Wathan@adamwathan
Doing a bit of research on motion design tonight for some future @tailwindcss stuff, crazy how much personality you can inject into a cube 😄
vimeo.com/9320652323:30 PM - 12 Apr 2019
23
179
He did the same with typography utilities by questioning the best line height, font-size etc.
Adam Wathan@adamwathanSomething I discovered a few years ago but have never seen anyone else talk about is that `line-height: 1` doesn't work on inputs in Chrome – in fact anything under 1.0625 is ignored and renders closer to ~1.2.
So line-height: 1 results in a taller input than using 1.1:14:49 PM - 09 Mar 2019
Every new feature he added had a strong research behind it and even top developers mentioned how smart decisions baked into the framework codebase:
Wow—just found out that Tailwind has composable transform classes. I naturally assumed this wasn't possible, but they pulled it off using CSS custom properties 🤯
How? The ".transform" class sets *every* transform property from CSS vars—all the other classes just set a variable.21:14 PM - 15 Dec 2020
Adopting design skills
Using Tailwind also helped me to give my design more modern and user friendly look. Steve Schoger the design man of the Tailwind team showed the best ways to build modern and functional design with simple tips.
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 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!
Top comments (1)
Seriously though, tailwind is the best 🤯🧙♂️😎