7 ms·
I love tailwind. I strongly feel that most modern CSS solutions are massively overthought. In engineering we have bigger problems to solve than a key/value list
by PUSH_AX 3y ago
I love tailwind. I strongly feel that most modern CSS solutions are massively overthought. In engineering we have bigger problems to solve than a key/value list that makes a div blue.
Tailwind removes the thinking around CSS, naming, preprocessors etc etc, it just lets me write good CSS and focus on components and other engineering problems.
I seem to be one of the few people who can read CSS properties horizontally as well as vertically, so I'm all good on most peoples major complaint.
- timeon 3y ago> most modern CSS solutions are massively overthought Example is Tailwind. Which in the end is same as inline CSS.
- PUSH_AX 3y agoThis is false and people need to stop parroting it.. Inline styles have high specificity and are often the culprit of specificity clashes. Inline styles don't follow a design/theme, tailwind has sensible defaults for spacing/colours and consistency etc. Inline styles are even more verbose than a tailwind class list. Tailwind has responsive classes out of the box. Inline styles don't really support pseudo classes....
- tipiirai 3y agoCurious: which modern CSS solutions are you referring to?
- dbbk 3y agoWhy not Styled Components? I've been using them for years now and I'm extremely productive. Tailwind on the other hand looks like a hellish nightmare, horizontal reading, proprietary syntax, no selector targeting of other components.
- PUSH_AX 3y agoMy personal opinion is that styled components creates an unnecessary and fuzzy extra abstraction on top of components.
- dbbk 3y agoNot really? It's just an element with some attached styles. styled.div`color:red` is a red-colored div. Hardly fuzzy.
- onion2k 3y agoThe equivalent styled component of the default Tailwind button of "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" is "styled.div`background-color:#8888ff;color:white;font-weight:bold;padding-y:2px;padding-x:4px;border-radius:4px;&hover{background-color:#aaaaff}`". Obviously you wouldn't actually write it like that because it's inline in your code so you can format it better, but the Tailwind version is less verbose and easier to read if you did.
- dbbk 3y ago"Less verbose" I guess by a few characters... at the expense that you're not writing real CSS rules. So you're having to translate every rule into whatever Tailwind's syntax is for the same thing.
- 9dev 3y agoIt's not the same thing, though. Tailwind applies rules from your design system, not plain CSS values. Assuming you're updating your corporate design to use border-radius 2 vs 4 everywhere, with Tailwind it's a matter of reconfiguring your design system configuration; with styled components (and other approaches) you're going on a string hunt.
- ellinoora 3y agoMy biggest issue with Tailwind is point #5 on the article: Tailwind encourages div/span-tag soup. Together with the class name soup my HTML becomes unreadable.
- beejiu 3y ago> HTML becomes unreadable To be honest, I don't find that a problem. Most frontend development is done in a higher-order abstraction like React. For the most part, I don't read HTML and I don't write HTML. If you use the right level of composition, "div soup" should never really be a problem.
- troupo 3y agoHow does Tailwind encourage div/span tag soup compared to anything else? You literally cannot do anything on the web without a div/tag soup
- hmcq6 3y agoIt doesn't the author is just bad at semantic HTML. That first example should be an `<article>` and the 5th example doesn't actually show div/span soup.
- batperson 3y agoA big issue that these articles never mention is that using browser dev tools to debug CSS becomes a huge pain with tailwind. It also makes it harder for community to create custom themes/user scripts for your website/app since targeting specific elements becomes incredibly hard when no class names exist.
- PrimeMcFly 3y ago> read CSS properties horizontally as well as vertically, What do you mean by this?
- Franzeus 3y agoI love tailwind too. The article did not convince me as there was also no real solution / alternative proposed. I have written custom css since the year 2000 and using tailwind just makes me much faster (is like setting flags) and simply by reading it, I understand how an element looks like. No matter if my past-self wrote it or another engineer. It can pollute the HTML (although @apply helps a lot to define your reusable .title, .card, .btn, .btn-lg, .btn-primary etc), but at least it is written in HTML and not in JS, which is even harder to transfer to other eco-systems. Also extending styles (tailwind config) is amazing if you want to reuse your styles in other projects.