Intro
There are few technologies that I fell in love with.
React is one of those, Redux is another, even if I don’t use it as much today.
I never fell in love with a CSS framework, until I discovered Tailwind, so I want to share my joy with you, sure that you will love it, too.
Briefly, Tailwind is one of those frameworks that make you write long class names like text-3xl sm:text-5xl text-center font-gray-600 leading-tight and this is the thing that scares most of the developers approaching it.
In this post I’m going to tell you the main reasons why Tailwind is very good for me and my team, sorting them by the impact they have on my everyday “job to be done”.
A built-in design system
I find myself creating better interfaces just because I use Tailwind.
It has a good design system built-in. What does it mean? Tailwind limits your choices, lowering the cognitive load and making your design better.
There’s a fixed (overridable) and well-thought set of font-sizes, colors, paddings, widths, shadows and so on. When you use this low-level design system you have more coherent interfaces from day one.
No context switching
I work just on the JSX code, without going back and forth to a CSS file. I almost never write CSS anymore. Super-productive!
No naming problem
I am very fussy when it comes to naming things.
With Tailwind no one in my team will ever write a new class with a name that I don’t like 😊. Everyone uses the same self-explanatory classes.
On the other hand, I know everyone immediately understands the meaning of my CSS classes (I know the others don't like my names, too 😉).
Complete, flexible, lightweight
Everything can be customized using tailwind.config.js: colors, fonts, spacings… everything!
To make this work on a React / Next.js / Gatsby project, you need to configure postcss.
And this is great, because it gives you a method, and a very good one.
When you have this configuration in place, not only you can configure the framework, but you can easily add purgecss to the equation and remove all the unused styles, dramatically reducing the size of the CSS bundle.
Easy to learn
People may convince themself that a new way of doing things is great only if they start doing things the new way. And if a technology has a steep learning curve, the trial phase becomes a nightmare, the first impression is bad and the old way is the one that wins.
With Tailwind, the onboarding process is as easy as throwing some classes in the code and seeing the result. As soon as developers start using responsive utility variants, they are often already with you, pleased to use it.
Conclusion
With Tailwind CSS I am more productive, more satisfied of my work and, at the end of the day, I am happier 😃. Try it to believe!
Top comments (17)
I've been using CSS-in-JS libraries (styled components/emotion/Theme-UI) and started learning Tailwind (TW hereafter) only last week.
So far, it seems like it'd be a great fit for "component" level styling.
How are site-wide styling handled with TW? Does it make sense to write the whole site with TW? Or should we leave the global styling to CSS/SASS?
The short answer is you can mix and match, and then with purgecss, clean put your unused classes before putting a project into production. TW is atomic: classes do not need or expect other classes, unlike say bootstrap.
The longer answer is you can handle setting site-wide styling with @apply - see this video.
Thank you, Bob.
That
@applyis a nice directive to apply a global style~Once you configure Tailwind for the basic defaults and you use a component-based framework like React, almost nothing is "global".
You may have a Header component, a Button component, a TextInput component... what's global? 😊
Thank you, Matteo. So long as each component is responsive, then it's a matter of composing each component :)
I think it's a well-founded fear, though. I don't personally like Tailwind or Bootstrap. They make it very overwhelming to parse what would otherwise be a very simple, legible chunk of markup. I can remember most of the CSS attributes and values I work with frequently. I would need to keep a reference sheet on hand, or study Tailwind's API, to remember most of their class names.
I think Steve Schoger is a brilliant designer/UI dev, though. Some of his UI tips have helped me make noticeable improvements to my own site.
If you start using Tailwind, you'll see that in no time you'll remember almost all of the syntax.
Now for me it's much simpler to remeber
justify-betweenthanjustify-content: space-between;.As for the legibility, when you work with components, as with React, you encapsulate the "many class complexity" in the component: outside of it you just see
<HeroUnit title="..." />In my current project I've been doing just what Tailwind is all about: creating name-effective utility classes that can be applied to a broad array of elements without a second thought. It might be too late now to introduce Tailwind to this project but I'll have it in mind for future ones. Thanks for bringing it to my attention.
Always pleased to hear someone being happier by using a new tool!
I've never used Tailwind- just read that people are generally happy with it.
Noob question here, what's the difference between Tailwind and Bootstrap 4? I love the utility classes it comes with and, for what I've read, seem very similar to those in Tailwind's
Tailwind is not opinionated, so you never have to "undo" default styles of the framework. It is designed to be customized and the responsive variants (
screen-size:prefix) are excellent to build great responsive interfaces quicklyI'm using Tailwind for the first time in my current project with Vue.js (and Laravel) and I love it!
I can confirm all the things you mentioned; I do feel more productive and I think my design is much better with Tailwind (primarly used Bootstrap before).
However, I think Bootstrap and Bulma may be easier to setup and start with for people who aren't that much into JS or coding and just want to write HTML+CSS. You do need at least some basic experience in JS, npm, node modules to start with TailwindCSS and set it up right (with other postcss plugins, purgecss, build process,...).
Sorry for the naive question, I haven't really checked Tailwind out, but I've heard good things about it. How do you override CSS though? My use case would be having a base CSS for English, and have overrides for other languages.
no need to override, you want left border to be 2 px and orange with some padding and gray background, also text should be orange as well?
<div class="border-solid border-l-2 border-orange-500 px-6 py-4 bg-gray-200 text-orange-500">some content or message</div>that's it, there is nothing to override here
I've tried it but I don't like to see a website full of atomic classes🤷🏼♂️... The HTML gets ugly with a lot of classes... Or I'm missing something?
To keep HTML beautiful usually ugliness is hidden in the CSS :)
Really:
1) You get used to read Tailwind classes
2) With React, I hide this class names inside React components: every component is small and the final JSX ("HTML") is very clean
You can 'store' the classes in an object : example -->
const style = {
card:['max-w-sm rounded overflow-hidden shadow-lg content-center mx-auto'],
}
return(
div className={style.card}
)
Thank you for the kind words! 😊