People definitely have opinions about Tailwind. There are staunch supporters and staunch haters, but I really don't want to get into all that. Head...
For further actions, you may consider blocking this person and/or reporting abuse
Most of the examples above should not be used in production, since they don't scale. Using arbitrary variants, children selectors etc. tend to be singletons in your compiled CSS file. Thus they will be unused on most pages in your app.
Sometimes style="padding:3px" is better than p-[3px], if your CSP is fine with it.
If you want to elaborate, I'm curious what doesn't scale exactly? Also, if you don't want to use Tailwind, it's all good. Use what works best for you and your team.
I just added this bit to the accessibility section in case you already read the article, but I think something that would be interesting to add to the Tailwind a11y story is using Tatiana Mac's approach of taking a no-motion-first approach to animations.
As someone who waited (and somewhat hated on it) on learning Tailwind, I used it in my recent portfolio revamp and now I LOVE it. I don't think you need to use it all the time and vanilla CSS certainly has it's place, but people make it out to be this villain in the CSS space.
It's also quite intuitive once you get the hang of it.
Tried again and again to like tailwind, it is just online CSS and I'll die on this hill.
I've worked on large (2m+ LoC frontends) and small sites, i always find plain CSS and following a good structure e.g. BEM is more readable and maintainable in the long run.
Thanks for giving it a read Craig!
Like I mentioned at the end of the blog post, "If you give it a go and say it's not for me, that's OK. Use what makes you the most productive."
Tailwind is good
Great overview! You've covered all the key aspects of this topic in detail and provided clear examples to support your points.
Thanks for reading Dmytro!
Great post ,@nickytonline.
Thanks @lymah!
I very frequently cite this: every-layout.dev/rudiments/global-...
Utility first will mean you will have too many utility classes.
Tailwind will be gone in 3 years maybe. I still use many early CSS I have learned before 2010. I have used and forgotten many ORMs, yet my SQL chops are still needed.
Another criticism I would make is that many of these libraries work only well, if you already have deep understanding of CSS.
To know why you have to write
motion-safemeans you have to know aboutprefers-reduced-motion.Both
BootstrapandTailwindsuffers from basically saying "flex" but in their own words: you need to knowflex-growbefore you can usegrow, but then why don't you just write regular CSSflex-grow? Because it is 5 characters longer?And finally: what happens when you have to restyle everything?
Anyone here remembers CSS Zen Garden? An HTML page with 221 different styles - with only CSS being different. You can't do a thing like this with utility classes.
Thanks for giving it a read András!
Every Layout is great! I really enjoy Andy Bell's (@hankchizljaw) work along with Heydon's. Andy's Cube CSS is another great project.
I also was a fan of CSS Zen Garden and a more modern version of it in Stephanie Eckle's (@5t3ph) work, StyleStage.dev
Announcing Style Stage: A Community CSS Showcase
Stephanie Eckles ・ Jul 10 '20
I don't think CSS utility classes are going anywhere, and I still think it's important to know how CSS works like.
You might not like the syntax of some of the CSS classes, and that's OK. Like I mentioned at the end of the post, "If you give it a go and say it's not for me, that's OK. Use what makes you the most productive."
Thanks for your correct answer, I'll check out Stephanie's work.
I personally fail to see the goodness of tailwind from your article.
You're basically forcing yourself to learn a new syntax and writing it awkwardly in an attribute, repeating yourself, losing the semantics along the way.
While missing out on other goodness-es of css like layers, nesting and others.
But it's fine. I hope we can all live together in a world where some people love it and find it productive while others find it simply dumb. No offense intended.
I mean that is really what it boils down to right? People who don't think its a big deal to invent a new language with bloated class name attributes in html code and people who do think that's a big deal. Tailwind is also notoriously bad at doing anything slightly more dynamic, or support slightly more advanced things from the css spec. There are things like cva that make tailwind slightly less of a headache, but why not just go for a styling framework that has those things built in, like PandaCSS, with none of the downsides of inventing a completely new language for styling that is not feature complete.
If Panda CSS works great for you, awesome.
Like I mentioned at the end of the post, use what makes you most productive.
I specifically mention PandaCSS, because it works exactly like tailwind, but with none of the downsides of having to learn utility class names instead of actual css.
I've been using css since IE5. If someone sais he understands css he has very little idea how to css. Not saying I have perfect css skills, but quite the opposite. I am capable to write up 200 lines of the stuff and have it work on the first try. With normal programming languages one could build an entire 10k line app and have 0 problems on the first try.
So, yes. If you can't express at least 50 correct lines before you end up in an endless cycle of trial and error go for Tailwind but keep in mind, the time you invest in learning it will be wasted in 5 years... You'll have to learn the next css thing... Still worth it tho.
I still think it's important to understand CSS, but Tailwind is a tool. I don't think it will disappear in 5 years, but we shall see. I also don't think it's for only people that don't understand CSS.
There's SASS, CSS modules, BEM conventions, CUBE CSS, all kinds of tools and methodologies to write CSS
Use what works best for you.
Whatever works is not that simple if you are building apps which are expected to las 10 years.
And yes, no tool will ever disappear, people who use it will.