The issue many people have with that is that it’s pure strawman. Nothing stops you from using utility classes: most design system have them. Many Tailwind also acknowledge that it can quickly becomes a mess and that’s why @apply is great but at that point you’re back at square one and it’s just another sass-like utility library.
CSS is not more hard than Elixir unless you refuse to learn the tool you’re using. Browser inconsistencies, on the other hand, are hell.
I’m not saying tailwind is the only library that gives you utility based classes, but I’ve never seen another framework that’s so based around them. I tried writing my own utility classes before using tailwind but you end up making so many little decisions that using your own quickly becomes overwhelming. Using a library and now you have to compare, and from what I’ve seen tailwind has the best docs, the best examples, and a large community.
I know @apply exists but I don’t really see a reason to use it if you have a templating system that can wrap up your HTML and your classes into one. That’s why I said it’s basically mandatory to use tailwind with a templating system, fortunately we have that in Phoenix by default.
I don’t think css is harder to learn, I think css is harder to maintain in a larger software project. I think that tailwind helps with this by largely eliminating the need to write custom css. If you disagree, then that’s fine, I merely wanted to point out that just looking at the example and going “ugh that’s gross” without actually trying it out for yourself is something that the docs explicitly call out.
To be fair, looking at examples and reading blog posts about Tailwind is what got me excited about it. Actually trying it out for myself is what turned me off.
That’s exactly the point of TailwindCSS for me. Think of it not as a CSS package, but as a fancy macro language to write your own CSS in a concise way. I don’t use any of the TailwindCSS’s utility classes in my html; My classes are all semantic and that are mostly composed by @apply directives.
Don’t get me wrong, Tailwind is excellent at what it does, it has a clear objective and it does it well.
I just don’t like how they bash the already existing tools based on pure strawman. People have different needs and different tools fulfill them. There’s no need from any side to bash each other so hard.
I don’t have much to say about the tech itself, people have been doing the very same as Tailwind for ages, either as small sass utility frameworks or as ad-hoc utilities for particular design systems(see GitHub primer).
Then what is the difference between:
.btn {
@apply py-2 px-4 font-semibold rounded-lg shadow-md;
}
And
.btn {
padding: 1rem .25rem;
font-weight: 600;
border-radius: .5rem;
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
box-shadow: 0 0 #0000, 0 0 #0000, var(--shadow);
}
With exception that I do not need to learn yet another language to understand what px-4 actually mean. We do not use single-letter variable names for a reason.
Less LOC.
I am of the opinion that you should write every line in your styles. I tried to do that with plain CSS and then I gave up because it was so damn hard. Then I used several CSS packages, milligram being one of them.
Tailwind brought back the level of control I need, without writing thousands of lines code in a language I barely know and certainly don’t like. Tailwind is far from perfect: It is dog slow to build and had crazy breakage between major revisions. But it is the best I found so far.
Yes. The advantages of TailwindCSS are obvious to me. Some context: I’m a backend dev, who “learned” HTML and CSS a long time ago. I don’t have a big incentive to stay up to date with latest and greatest advancements in CSS and their browser compatibility.
Say I want a nice shadow on a <div>. So my options are:
shadow-md
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
box-shadow: 0 0 #0000, 0 0 #0000, var(--shadow);
Even if I learned what that piece of CSS does, it’s impossible for me to write it correctly from the top of my head the next time. Not to mention parsing what it does - I can’t see forest for the trees.
So I chose to learn Tailwind instead of CSS. I takes a day to remember the most common classes and the IDE will give me the right suggestion most of the time (shadow, border, truncate, etc.). It’s not to say that Tailwind replaces CSS - you still need to grok things like the flex box. But the speed improvement is huge.
px-4 is not a variable, it does not change its meaning.
Padding is one of the most common attributes, so it makes sense to have a short syntax for it (p-2 instead of padding-2). Same goes for margin, width and height.
I get it, Tailwind is not your thing.
Less LOC is huge. For my entire site I have about 30 lines of custom CSS. The rest is just Tailwind with some custom brand related colors loaded into the config and named.
Previous CSS file was 2,000 lines and kept growing because it was easier to just add something new than make sense if exactly what was in there and where it was used. Dramatically simplified maintenance.
Additionally, there are hundreds of CSS frameworks out there. Everybody has a preference for which one is best too. It results in analysis paralysis trying to figure out which one you should invest the time to learn and apply to your project, when you should be thinking only about what you need to do.
My expectation is for Tailwind to be the last CSS framework I’ll ever learn. I don’t get into Tailwind UI because the components are plenty easy to build on their own thanks to Tailwind.
The design ebook that those guys wrote does a great job of explaining the reasons you’d build the way that Tailwind is built. I read the entire thing and couldn’t argue with any of it. That’s rare for me.