Stop Getting Paralyzed with CSS, use Tailwind

Tailwind Demo

Few weeks ago, a lot of people are bashing Tailwind in a Telegram group discussion. The arguments against it are Tailwind slows down teams if not all of them able to use Tailwind, and it makes HTML/JSX ugly. Even one person tells an anecdote of a frontend dev that got fired because his slow progress on building features, hence Tailwind is bad. Dude… who the hell got fired because they unable to implement Tailwind classes?

Before Tailwind, in somewhere.css

.container {
margin-left: auto;
margin-right: auto;
}

After Tailwind, right on the class=”…”

mx-auto

Are you sure he’s getting fired?

So I’ll compile all arguments for and against Tailwind, and answer them.

Arguments for Tailwind:

1. Development is so much faster if the team already knows Tailwind
2. You don’t have the problem of naming CSS classes
3. No need to find the CSS file you need to modify, everything is right there in the HTML/JSX class name.
4. Use Just-In-Time (JIT) compiler if you only want to write plain HTML files. (Will write about how to use Tailwind JIT compiler soon)
5. Typography support to manage generated vanilla html content easily.
6. Easy responsive display style management.

Arguments against Tailwind, and my answer:

1. Long classnames, making codebase “dirty”
   Answer: I’d rather have dirty HTMLs than CSS class names that will probably get dirty anyway. Maintaining Tailwind class names is way easier than maintaining CSS class names and files. If your HTML/JSX views looks dirty, maybe you should break them into components. Spending my time in breaking down components is, 100% of the time, way more useful than making my HTML class pretty as it helps with unit testing, debugging, and reusability. You even can use @apply if you want to organize your class names, read more about this, that solution is pretty much a checkmate given the speed advantage you can achieve with Tailwind.
2. Slowing down teams if maintainers need to learn Tailwind first
   Tailwind uses simplified CSS syntax. Instead of writing
   padding-left: 0.75rem;
padding-right: 0.75rem;
   I can just write px-3 . I don’t have to declare variables to standardize padding values, I don’t have to decide if it uses px or rem or em. The simpler solution will win in the long run.
3. Will have to write CSS anyways for special cases so why not just use CSS in the first place
   What about not writing magical CSS at all? Every feature that cannot be built with Tailwind is probably an over-engineered feature.

Componentization is more beautiful than managing your own CSS.

Everything is a tradeoff, but the tradeoff I’m making in using Tailwind is worth the cost 99% of my cases. It’s not hard to learn it, and no you won’t get fired. Just use it, you have features to build, not CSS files and class names to manage. Build it fast and smart without being paralyzed by CSS.