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

Why Tailwind CSS Won

matt-rickard.com

Post reply on HN
Print view View original

151–160 of 559 posts

Re: Why Tailwind CSS Won

#151

Post by pcthrowaway »

izoow wrote: post #117
bennyp101 wrote: post #14

For getting designs up and running quickly, it really is great. Being able to think "Hmmm, I want a rounded button, with a border and a blue background" and just typing class="rounded border border-blue-600 bg-blue-500" and it's done. With lots of UI being components now, it doesn't really matter that it is verbose - I actually find that helpful. And even if you want to have a class that you use all over the place, j…

> Being able to think "Hmmm, I want a rounded button, with a border and a blue background" and just typing class="rounded border border-blue-600 bg-blue-500" and it's done. I'm not a frontend developer and don't really know much about these frameworks, but how is this different from just using style="actual css"? This just feels like inline styles reinvented for whatever reason.

the style attribute doesn't have the full power of stylesheets (and thus tailwind).

media queries and pseudo-elements are impossible, just off the top of my head.

Tailwind's patterns for device responsiveness are actually the most intuitive I've tried

Re: Why Tailwind CSS Won

#152

Post by jmull »

izoow wrote: post #117
bennyp101 wrote: post #14

For getting designs up and running quickly, it really is great. Being able to think "Hmmm, I want a rounded button, with a border and a blue background" and just typing class="rounded border border-blue-600 bg-blue-500" and it's done. With lots of UI being components now, it doesn't really matter that it is verbose - I actually find that helpful. And even if you want to have a class that you use all over the place, j…

> Being able to think "Hmmm, I want a rounded button, with a border and a blue background" and just typing class="rounded border border-blue-600 bg-blue-500" and it's done. I'm not a frontend developer and don't really know much about these frameworks, but how is this different from just using style="actual css"? This just feels like inline styles reinvented for whatever reason.

With inline styles you can’t do media queries (e.g., so your site can look good on both phones and desktops) or pseudo selectors (e.g. :hover).

Also, though it’s lower-level than something like bootstrap, it does have a design system. Bootstrap is like building a model from a kit, plain css is like building a model from scratch, and tailwindcss is like building a model from lego.

Re: Why Tailwind CSS Won

#154

Post by Incipient »

wildrhythms wrote: post #135
fjfuvucucuc wrote: post #116

Earlier quoted context omitted.

"trivial"? So I still have to componentize my presentation layers to do tailwind "correctly", but instead of writing CSS in readable multiline chunks in a language every developer already knows, I need to use this cryptic one liner in any order that literally nobody can read? What in the hell is wrong with this industry? Sometimes clever ideas aren't all that clever. Sometimes they're just dumb.

This might surprise you but most industry web development today is using components powered by a framework, and Tailwind fits in perfectly to the close coupling of styles to components.

But in components with scoped styling, you're better off just using css directly. Create a class that has all the styles you want, then use it in the HTML - nicely and cleanly separates css and HTML code.

Re: Why Tailwind CSS Won

#155

Post by paleite »

mablopoule wrote: post #147
nisegami wrote: post #145

Earlier quoted context omitted.

>You're not learning anything valuable by learning Tailwind. Learn CSS, that will stick with you for the next 20 years. Tailwind maps onto CSS in a very straightforward way. I think you'd have to go out of your way to "learn Tailwind" without also improving your knowledge of CSS.

Except for the whole "Cascading" part. I think I understand tailwind, but like the parent poster I'm really not a fan, because while CSS can be a footgun, it can also be quite clean when you use a sane DOM structure, CSS variables, and well thought out CSS selectors.

i think that’s what people’s argument FOR tailwind is: CSS can easily be a footgun, unless everyone on the team uses a sane DOM structure, CSS variables and well thought out CSS selectors.

i’ve yet to witness a project without “!important” scattered throughout the codebase.

Re: Why Tailwind CSS Won

#156

Post by troupo »

keyle wrote: post #140

Gray beard's 5c: Tailwind is a farce and a catastrophe. It's as modern as the style parameter is, and it's as reusable as a moving a dirt pile from one corner to the next. You're not learning anything valuable by learning Tailwind. Learn CSS, that will stick with you for the next 20 years. It amuses me when a library is implemented 'with tailwind', which means it's totally useless to the people _not using tailwind_,…

> You're not learning anything valuable by learning Tailwind.

1. You need to know CSS to use Tailwind

2. I learned and understood quite a few of things I rarely use thanks to Tailwind's amazing docs. Docs that are non-existent for CSS

3. I'm reasonably good with CSS, but I could never come up with a consistent and minimal design system that Tailwind offers

That said, to things everyone should read to up their CSS game is Every Layout https://every-layout.dev/ and Inclusive Components https://book.inclusive-components.design/

Re: Why Tailwind CSS Won

#157

Post by troupo »

mablopoule wrote: post #147
nisegami wrote: post #145

Earlier quoted context omitted.

>You're not learning anything valuable by learning Tailwind. Learn CSS, that will stick with you for the next 20 years. Tailwind maps onto CSS in a very straightforward way. I think you'd have to go out of your way to "learn Tailwind" without also improving your knowledge of CSS.

Except for the whole "Cascading" part. I think I understand tailwind, but like the parent poster I'm really not a fan, because while CSS can be a footgun, it can also be quite clean when you use a sane DOM structure, CSS variables, and well thought out CSS selectors.

> quite clean when you use a sane DOM structure, CSS variables, and well thought out CSS selectors.

I've yet to see a single project that doesn't fail on all three.

Re: Why Tailwind CSS Won

#158

Post by sunwukung »

xigoi wrote: post #49
blowski wrote: post #24

Earlier quoted context omitted.

I can sum up what I like about Tailwind in the following code: ``` (in CSS) a.link { border: red; } a.link:hover { border: blue; } ``` ``` (in Tailwind) ``` It's much easier in Tailwind for me to see locally what's going on with that styling. If I lived in this code all the time, or I was good at structuring CSS, then maybe the first would be more appealing. But I'm a shit at CSS, it always turns into an unmaintainab…

Now imagine that you want to change the border color to yellow. Would you rather change a single line of CSS, or every single link on all your pages?

As stated elsewhere, if you're using a component based UI, this isn't a problem. You're also free to mix regular CSS with Tailwind.

As for the "git gud" school of CSS, should we also abandon React, Svelte and the like and revert to hand-cranking DOM manipulation like it's 1999...?

Sure, if you're manually editing a large volume of .html by hand, Tailwind is bad news, but given the plethora of static site builders out there (brief shout out to Astro which is excellent), manually authoring individual .html pages seems like masochism.

Re: Why Tailwind CSS Won

#159

Post by tmorton »

mablopoule wrote: post #147
nisegami wrote: post #145

Earlier quoted context omitted.

>You're not learning anything valuable by learning Tailwind. Learn CSS, that will stick with you for the next 20 years. Tailwind maps onto CSS in a very straightforward way. I think you'd have to go out of your way to "learn Tailwind" without also improving your knowledge of CSS.

Except for the whole "Cascading" part. I think I understand tailwind, but like the parent poster I'm really not a fan, because while CSS can be a footgun, it can also be quite clean when you use a sane DOM structure, CSS variables, and well thought out CSS selectors.

There are many technologies that match this pattern: "While X can be a footgun, it can also be quite clean when you use A, B, and C."

In practice, they don't end up "quite clean" outside small personal projects.

Re: Why Tailwind CSS Won

#160

Post by strken »

wildrhythms wrote: post #130
izoow wrote: post #117

Earlier quoted context omitted.

> Being able to think "Hmmm, I want a rounded button, with a border and a blue background" and just typing class="rounded border border-blue-600 bg-blue-500" and it's done. I'm not a frontend developer and don't really know much about these frameworks, but how is this different from just using style="actual css"? This just feels like inline styles reinvented for whatever reason.

Yes it's like inline styling, but the difference is that with Tailwind your build has just 1 CSS class with { display: flex; } used across your HTML, rather than inline styling or decoupled stylesheets with hundreds of instances of {display: flex}. If you use a framework like React, Angular, Svelte, it makes sense because your styles are usually coupled to your components anyway.

There is a real though very niche reason why having fewer selectors is useful, speaking as someone who has run into the selector limit in IE before.
Post reply on HN