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

111–120 of 559 posts

Re: Why Tailwind CSS Won

#111

Post by peferron »

xigoi wrote: post #52
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" I rarely think this. It's usually “I want a button that looks like all other buttons on my site”. Vanilla CSS is great for that.

CSS classes are great for that until you need to reuse HTML and/or JS, at which point you're back to square one. People are moving to components because they solve these 3 things at once.

Re: Why Tailwind CSS Won

#112

Post by dlbears »

progx wrote: post #102

Wordpress, React, many others win too and nobody would say, that these are superior to anything else. Like in WordPress or React you can fiddle with Tailwind too. People like to fiddle. You can make things easy, or fiddle, what did people do? Correct, fiddle. Why you think so many huge overbloated frameworks have soo much success. Fiddle. Fiddle is the key to everything in development. You fiddle hours and hours unti…

insert joke/reference to hyperfiddle

Re: Why Tailwind CSS Won

#113

Post by xigoi »

LtdJorge wrote: post #107
xigoi wrote: post #52

Earlier quoted context omitted.

> Being able to think "Hmmm, I want a rounded button, with a border and a blue background" I rarely think this. It's usually “I want a button that looks like all other buttons on my site”. Vanilla CSS is great for that.

I assume OP means that for the fist button of the site, as in creating the site from 0.

In that case, you just write

    button {
      /* your styles here */
    }
to set a precedent for all your future buttons.

Re: Why Tailwind CSS Won

#114

Post by conradfr »

xigoi wrote: post #50
sod wrote: post #45

If css had a strong opinion and better syntax for responsiveness by screen width, css frameworks were way less popular. Tailwind, bootstrap and co. aren't used to avoid writing css. It's used because writing `class="my-4 mb-sm-5 mb-lg-6"` is so much faster and easier then doing this with a bunch of media queries and a class name, that has to be unique, because css is a global scope nightmare. I mean, just look at it.…

> class="my-4 mb-sm-5 mb-lg-6" I've seen Perl code that was more readable than this.

If you know the convention it's quite easy.

I don't know Tailwind but with Bootstrap it would be m = margin, y = y axis, b = bottom, sm/lg = screen size, 4/5/6 = size

Re: Why Tailwind CSS Won

#115

Post by wingspan »

sod wrote: post #45

If css had a strong opinion and better syntax for responsiveness by screen width, css frameworks were way less popular. Tailwind, bootstrap and co. aren't used to avoid writing css. It's used because writing `class="my-4 mb-sm-5 mb-lg-6"` is so much faster and easier then doing this with a bunch of media queries and a class name, that has to be unique, because css is a global scope nightmare. I mean, just look at it.…

It’s worse than that, since you can’t use CSS variables inside a media query!

Re: Why Tailwind CSS Won

#116

Post by fjfuvucucuc »

chipgap98 wrote: post #94
xigoi wrote: post #52

Earlier quoted context omitted.

> Being able to think "Hmmm, I want a rounded button, with a border and a blue background" I rarely think this. It's usually “I want a button that looks like all other buttons on my site”. Vanilla CSS is great for that.

Tailwind is also great for this. You create components with Tailwind that make this trivial

"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.

Re: Why Tailwind CSS Won

#117

Post by izoow »

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.

Re: Why Tailwind CSS Won

#118

Post by Shrezzing »

I find Tailwind's claim that you can "build modern websites without ever leaving your HTML" to not be entirely correct. Instead of context switching from my `.html` to a `.scss` file, I just end up context switching to their documentation website to find the syntax they used.

It's internally inconsistent, so you can't guess what the Tailwind class name is for styling, while you can do this for CSS on the majority of properties. In Tailwind, font weights are just `font-bold` for `font-weight:bold`, while font variants drop the `font-` prefix part, and become `ordinal` instead of `font-variant-numeric:ordinal`. That's not an isolated example, it does the same with text-color versus text-decoration, and text-decoration-color adheres to neither of those systems.

It's quite close to learning an entire new styling language on top of CSS. It may be the case that putting everything into the HTML is more efficient from a productivity point of view, but I don't think Tailwind's specific implementation achieves that.

Re: Why Tailwind CSS Won

#119

Post by xigoi »

peferron wrote: post #100
xigoi wrote: post #79

Earlier quoted context omitted.

Why would you use a component for something that's already a built-in HTML element?

Why would you style an anchor element when your browser already has default styles for it?

Because you want it to look different, such as the color being consistent with the rest of your website?

Re: Why Tailwind CSS Won

#120

Post by conradfr »

surume wrote: post #66

According to NPM download stats, it has 6 million weekly downloads, the exact same amount as Styled Components. Emotion also has around 6 million. So that's 12 million for CSS-in-JS, as opposed to 6 million for Tailwind, so how did it win?

And Bootstrap has 5.3 millions, although on a flat line.
Post reply on HN