Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Ways in which Tailwind CSS is a better choice than Twitter Bootstrap

frontendeng.dev

Post reply on HN
Print view View original

31–38 of 38 posts

Re: Ways in which Tailwind CSS is a better choice than Twitter Bootstrap

#31

Post by deprecative »

moritzwarhier wrote: post #24
deprecative wrote: post #11

Earlier quoted context omitted.

People make a bunch of excuses for Tailwind. If you're going to write CSS just write CSS. Stop coping.

I think the word "coping" is inappropriate here, it's a tradeoff and in addition a matter of preference. You might like not having 24000 permutations of display: flex; align-items: center; in your code. There are good alternatives to Tailwind and also small projects where "just write CSS" is enough. In larger projects, most people need at least strong naming conventions, other tools, and/or an opinionated "template"…

> Why is doing things differently from your preference "coping"?

It's not.

> There are good alternatives to Tailwind

Yes, just write the CSS. If you are going to use Tailwind, just write CSS. If you are going to use Bootstrap or any of those sorts of resources the equation is different. You're no longer writing CSS in a class attribute but pretending it's a style tag and that you're somehow doing things "better". You're just writing CSS without writing CSS.

Re: Ways in which Tailwind CSS is a better choice than Twitter Bootstrap

#33

Post by aleksiy123 »

rhuru wrote: post #30
aleksiy123 wrote: post #29

Earlier quoted context omitted.

This is specifically what they tell you not to do. https://tailwindcss.com/docs/reusing-styles Their advice is to use templating (components, partials, loops) to abstract and I agree. It ends up working a lot better than abstracting your CSS.

I am sorry I should have written it better. This is how I abstract away from tailwinds utility litter. https://tailwindcss.com/docs/reusing-styles#extracting-class...

Further down in the link they do talk about not doing this for everything. Only for small things when templates are too much.

"Whatever you do, don’t use @apply just to make things look “cleaner”"

Re: Ways in which Tailwind CSS is a better choice than Twitter Bootstrap

#34

Post by rhuru »

aleksiy123 wrote: post #33
rhuru wrote: post #30

Earlier quoted context omitted.

I am sorry I should have written it better. This is how I abstract away from tailwinds utility litter. https://tailwindcss.com/docs/reusing-styles#extracting-class...

Further down in the link they do talk about not doing this for everything. Only for small things when templates are too much. "Whatever you do, don’t use @apply just to make things look “cleaner”"

It is in general good CSS advice not just specific to apply.

Re: Ways in which Tailwind CSS is a better choice than Twitter Bootstrap

#35

Post by wishinghand »

rhuru wrote: post #28

Based on the comments by other folks here, looks like lot of folks are using Tailwind incorrectly and then blame it for not being the right tool. Tailwind classes might be verbose but you are not supposed to use them directly in the markup. Always create wrapper classes that are specific to your design and simply apply the utility classes in them. In short make your own Bootstrap like framework using Tailwind's primi…

This is just CSS classes with more steps.

Re: Ways in which Tailwind CSS is a better choice than Twitter Bootstrap

#36

Post by moritzwarhier »

dbbk wrote: post #25
moritzwarhier wrote: post #24

Earlier quoted context omitted.

I think the word "coping" is inappropriate here, it's a tradeoff and in addition a matter of preference. You might like not having 24000 permutations of display: flex; align-items: center; in your code. There are good alternatives to Tailwind and also small projects where "just write CSS" is enough. In larger projects, most people need at least strong naming conventions, other tools, and/or an opinionated "template"…

I would much prefer the explicit, vertically-legible, autocompletable and real CSS rules to a horizontal mishmash of proprietary aliases.

I'm not even disagreeing with that. I saw the tradeoffs of Tailwind too.

And yes, I also agree with the core of your critique: Tailwind is a (yet another) DSL on top of CSS, which makes it smelly.

But as I see it, the reason for using Tailwind is not that this DSL was easier, in fact it's the opposite, I constantly had to use IDE autocomplete and/or the docs in order to use it.

Tailwind is a nasty DSL inside the class attribute, yes. And still, this DSL can be and often is a relieve from other custom CSS that grows exponentially and causes bugs due to selector complexity.

Tailwind IMO solves the same problem that styled-components, CSS Modules and ShadowDOM try to solve.

Re: Ways in which Tailwind CSS is a better choice than Twitter Bootstrap

#37

Post by dbbk »

moritzwarhier wrote: post #36
dbbk wrote: post #25

Earlier quoted context omitted.

I would much prefer the explicit, vertically-legible, autocompletable and real CSS rules to a horizontal mishmash of proprietary aliases.

I'm not even disagreeing with that. I saw the tradeoffs of Tailwind too. And yes, I also agree with the core of your critique: Tailwind is a (yet another) DSL on top of CSS, which makes it smelly. But as I see it, the reason for using Tailwind is not that this DSL was easier, in fact it's the opposite, I constantly had to use IDE autocomplete and/or the docs in order to use it. Tailwind is a nasty DSL inside the clas…

I've been using Styled Components exclusively for years and have no issues with selector complexity.

Re: Ways in which Tailwind CSS is a better choice than Twitter Bootstrap

#38

Post by moritzwarhier »

dbbk wrote: post #37
moritzwarhier wrote: post #36

Earlier quoted context omitted.

I'm not even disagreeing with that. I saw the tradeoffs of Tailwind too. And yes, I also agree with the core of your critique: Tailwind is a (yet another) DSL on top of CSS, which makes it smelly. But as I see it, the reason for using Tailwind is not that this DSL was easier, in fact it's the opposite, I constantly had to use IDE autocomplete and/or the docs in order to use it. Tailwind is a nasty DSL inside the clas…

I've been using Styled Components exclusively for years and have no issues with selector complexity.

I am using Styled Components as well in my current job and like it a lot.

Maybe my post didn't make this clear, but that's what I meant when I said it solves the same problem for me.

No dead styles, no specificity wars, no naming worries.

Edit: I see, I wrote "try to solve" in contrast to "solve". That was unintentional and thus not what I wanted to say.

Post reply on HN