Tailwind as explained in their official website is a utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.
As a beginner writing pure CSS was very good since it helped in understanding and memorizing the rules needed to achieve a specific layout. I had a lot of experience in doing this, however, none brought me the satisfaction and productivity boost that TailwindCSS has.
Tailwind has a very basic syntax.
Here is an example of how it looks like:
<figure class="bg-gray-100 rounded-xl">
<img class="w-32 h-32" src="/sarah-dayan.jpg" alt="" width="384" height="512">
<div class="pt-6 space-y-4">
<blockquote>
<p class="text-lg">
“Tailwind CSS is the only framework that I've seen scale
on large teams. It’s easy to customize, adapts to any design,
and the build size is tiny.”
</p>
</blockquote>
<figcaption>
<div>
Sarah Dayan
</div>
<div>
Staff Engineer, Algolia
</div>
</figcaption>
</div>
</figure>
Each class represents a CSS declaration. In the example above pt-6 represents padding-top: 1.5rem;
This will generate the following:
Tailwind has a myriad of benefits compared to custom CSS
Some of the things I found interesting about Tailwind are:
No need to leave your HTML code
Writing code in one place can be faster and more interesting other than jumping from files to files, this can help to focus more on the task at hand.
At times this may become messy especially when working on large projects.
Smaller Styles
Tailwind guarantees a consistent bundle size since utility class names can be shared between elements.
For unused CSS, Tailwind is paired with purge CSS this removes extra classes on the codebase.
Higher Productivity
Writing Tailwind CSS is much faster compared to writing CSS or CSS-in-JS. Text editors and IDEs automatically helps us with the autocomplete and formatting, however, in order to trigger the autocomplete we have to write the selectors and pieces of declarations.
In addition, variants in Tailwind have prefixes which can be added to classes, representing a specific CSS pseudo-class or custom plugins.
Consistency
Also, Tailwind has a lot of pre-built classes mainly for sizing and coloring, this will reduce or completely remove the need to implement a design system.
Customization
Developers can extend or modify classes in the tailwind.config.js file. One can tamper right into Tailwind and can also add custom plugins , changes made will be reflected in the final stylesheet.
Inside this file, one can create normal CSS classes.
Tailwind Drawbacks
Some of the things I may disagree with Tailwind:
Readability
When a considerate amount of classes are added to an element, it may become daunting to read.
With correct component abstractions this can be easily solved.
Complex Animations
Archiving complex animations is very hard.
One would have to create a class for each element in order to use plain CSS, this will end up in doing more work.
Use of libraries can also be used to solve this.
Some CSS properties are not included.
My Final Thoughts
In my journey Tailwind has helped in increasing my productivity, reducing the bundle size of my apps and made me more consistent.
Although it may have worked well for me and many other developers, it doesn't mean it is the perfect solution for every project.
Us front-end developers as long as we guarantee maintainability, scalability, and performance, Tailwind is definitely the best solution considering its myriad of benefits.
Latest comments (32)
I've gone from CSS -> Tailwind -> Inline CSS, xD with a custom class here or there.
I agree that writing
class="flex flex-row justify-center align-center h-10 w-10"may not be clear. But you must not forget that you can create a class composed of another class using "@apply".Like
class="myClass".myClass {@apply flex flex-row justify-center align-center h-10 w-10
}
With a meaningful name for your class.
I have tried to use Tailwind twice now but I keep returing back to standard CSS. I do have some Bootstrap components as foundation always but then the rest is just SCSS with BEM approach.
Problem with Tailwind is number of css classes I need to write. Often css class starts to look like style tag and I end up wondering how is this better and faster?
Perhaps I should give a third go to TW but then again, BEM with Atomic Design isn't really broken to me. So why try to replace it?
Increased productivity is a subjective matter.
Tailwind is good for smaller apps, but as soon as the app becomes big; all of these classes become a nightmare to manage as compared to the BEM or atomic approach used while writing css/scss.
I had to quit Tailwind halfway in a project just because it was not manageable on an industrial level software.
Nice writeup, love how you talk about the pros and cons instead of blindly following the trend.
One aspect of Tailwind that's rarely discussed is its handling of complexity. Sure, it pretty much avoids specificity and therefore deals with one of the challenging aspects of CSS... but that also makes media queries quite hard to work with. You just keep adding classes and classes for each viewport size, which is a sub optiman solution.
In my opinion, this is going to be its downfall. CSS is getting increasingly complex in that direction. Media queries nowadays go far beyond screen sizes, into multiple accessibility issues such as dark mode, reduced motion, high contrast, etc. And it's about to become even more complex with container queries, layers, scopes... things that I can't really see Tailwind (or the utility-first / utility-only architecture) handling satisfactorily.
But that's me. In the very near future (~ 2 years) we may go into a valorization of the "normal" CSS specialist to handle the incredibly complex contexts of modern CSS. Or not. But if we do, Tailwind is going to be rapidly obsolete.
But if you use Tailwind, chances are you'll be standardizing raw CSS avoidance in your guidelines (otherwise your codebase would turn into a mess with the very first freshly hired frontend developer), so your cost to hire rises drastically, because you now have to teach every single frontend dev you hire how to use Tailwind? It's not nearly a no-brainer must-have like ES6, you can't only hire those who know Tailwind — there'll soon be no candidates to offer a job to.
I had to make that kind of decisions while working as a lead frontend dev / evangelist and interviewing 10 devs a week. Gulp broke on us and turned into legacy, same with SCSS and obviously Backbone.
Can't go wrong with raw tools though, considering the fast pace of innovation of web standards.
To me, Tailwind is only perfect when you’re writing code alone 😉
To me Tailwind is just like inline css, what if you made a change in a component and have to do the same change in other files?
You can still abstract tailwind utility classes into named classes if the situation calls for it. Then you'd just update the class instead of multiple components.
Thanks for the great work!
Love to see it.
Does tailwind have demos for some of the stuff that needs JavaScript? Like accordions, modals, tooltips, etc, etc,
what you might be looking for is their other product, Tailwind UI: tailwindui.com/
Tailwind is a pure CSS framework so it only includes styling. You can use any JS library you like / write Your own JS code to create components.
tailwindcss.com/docs/extracting-co...
Nice article, if you use React I have coded a UI Kit powered by Tailwind CSS
windy-docs.vercel.app/