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

Tailwind: A Utility-First CSS Framework

tailwindcss.com

Post reply on HN
Print view View original

1–10 of 106 posts

Re: Tailwind: A Utility-First CSS Framework

#3

Post by edhelas »

I personally have an issue with this "Utility/Functional" CSS pattern.

To me I still think that the good old "HTML describe how the content is organized, CSS describe how this content looks like" is the way to go. In the end it's how CSS and HTML were designed at first.

But when I see that
I'm sorry but it just doesn't feels right to me.

Re: Tailwind: A Utility-First CSS Framework

#5

Post by cimmanom »

edhelas wrote: post #3

I personally have an issue with this "Utility/Functional" CSS pattern. To me I still think that the good old "HTML describe how the content is organized, CSS describe how this content looks like" is the way to go. In the end it's how CSS and HTML were designed at first. But when I see that I'm sorry but it just doesn't feels right to me.

Yup. Call me old-school, but seeing markup like that makes me wince.

Re: Tailwind: A Utility-First CSS Framework

#6

Post by badestrand »

edhelas wrote: post #3

I personally have an issue with this "Utility/Functional" CSS pattern. To me I still think that the good old "HTML describe how the content is organized, CSS describe how this content looks like" is the way to go. In the end it's how CSS and HTML were designed at first. But when I see that I'm sorry but it just doesn't feels right to me.

Yes, the problem is that this library just replaced typing
with
without realizing that the first is considered a bad practice for a reason and that the second is equivalent.

Re: Tailwind: A Utility-First CSS Framework

#8

Post by giancarlostoro »

tnorthcutt wrote: post #4
giancarlostoro wrote: post #2

Would be nice to see sample templates of what it all looks like in practice.

https://tailwindcomponents.com/

Thanks! That page has odd behaviors on mobile at least on Android with FireFox. But it looks like the css has clean looking components.

Re: Tailwind: A Utility-First CSS Framework

#9

Post by jasim »

Tailwind is the best thing that has happened to CSS Frameworks in the last 10 years.

* Define the essence of your design in a JSON - typography, colors, spacings, shadows, borders et al.

* Anyone in the team including backend developers can create new interface components without waiting on a designer, thanks to well-defined scales that compose well.

* The component (HTML+CSS) is the unit of abstraction. eg: "ProfileCard". Inside ProfileCard you'll use Tailwind's utility classes to build your component. You reuse this component everywhere, and if you have to "change a button's padding across the product" (which to me is far too rare) you open your component files and change them there.

* It is so easy to build UIs - you don't have to name every single element in the DOM - these names are _only_ to act as "hooks" into the CSS, and serve no abstraction. With Utility classes you can just assemble them in the HTML without touching the CSS

* Tailwind has excellent documentation and great conventions - this means between projects all you need to know is their particular scale. Don't have to learn a new UI framework everytime.

* Consistency, consistency! Thanks to design scales.

* Works so well for custom UIs. Have your designer do absolutely original designs in Sketch, and first transcribe their scales into tailwind.config.js, and voila! start pushing out its HTML at breakneck speed.

Post reply on HN