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

51–60 of 106 posts

Re: Tailwind: A Utility-First CSS Framework

#51

Post by mikewhy »

jasim wrote: post #9

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: "Profile…

I mean a lot of those things were possible with bootstrap-sass years ago.

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

_variables.sass

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

This is true, but is solved by any sort of component system and not unique to tailwind.

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

Why would you change a padding in multiple files when you can set `$base_padding: 10px`?

> 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

Going by the first example in the linked article, something like "text-grey-dark" seems like an awful idea when what it really means is "text-quiet". Heck in their example "dark" is _lighter_ than the surrounding text.

Re: Tailwind: A Utility-First CSS Framework

#52

Post by cramer_corey »

andrewmcwatters wrote: post #49

One of the biggest strengths of Bootstrap is that everyone uses Bootstrap. I can come to a company, use Bootstrap, and expect that new employees will also use Bootstrap or that it's already been used there! It's so common in the industry. It also means, for front-end developers like me, that I can create a company theme on Bootstrap, and get junior developers to use it can feel comfortable with being able to implemen…

You make interesting points. For me, as a back-end developer, the prevalence of Bootstrap is a major con because I can't (due to lack of knowledge or confidence, I'm not sure) make a Bootstrap site look like anything other than a Bootstrap site with different colors. Tailwind is the first front-end framework that successfully got me away from that and helped me execute own unique design vision. What seems to come to you easily is a complete struggle for me.

Re: Tailwind: A Utility-First CSS Framework

#53

Post by davepeck »

adamwathan wrote: post #15

Author of Tailwind here! If you haven't worked with a library like this before, I promise your gut reaction will be "holy hell this is the worst thing I've ever seen" (it was my reaction too!) You really do have to try it to shake that impression. If you need a bit more convincing before you're willing to try it, I wrote an in-depth article a while ago that documents my journey from a "semantic classes"-loving HTML/C…

Thank you. Your article is one of the most thorough and thoughtful things I've read about this (often frustrating) corner of web development.

Re: Tailwind: A Utility-First CSS Framework

#54

Post by dmix »

blairanderson wrote: post #44

Hi There, have you tried Tachyons? https://github.com/tachyons-css/tachyons Its similar, but has been around since 2015.

Also http://basscss.com/ which convinced me of the genius of using this functional/utility approach to CSS.

The website themes just seemed so much simpler and minimalist, but also more consistent across the whole site. Significantly reducing the amount of time I need to create my own CSS classes.

Re: Tailwind: A Utility-First CSS Framework

#55

Post by rverrips »

ssijak wrote: post #23
sanbor wrote: post #11

It is convenient but you are not separating markup and presentation. I think the whole point of css is to swap stylesheets and get a different presentation, like demostrated by http://www.csszengarden.com/ BEM/OOCSS lets you do this.

How many times you do that in real project? Or have you ever done that in your career? And if a project needs substantial redesign it is usually acompanied by the functionality change, which means you need defferent html/components too, so you still can`t just swap css files.

+1 on this for "real projects" that actually do use different styles. Our enterprise e-commerce platform uses an internally maintained design system with utility classes only, very similar to tailwindcss. We have 15 different "brands", so simply reference a different "brand" to get it's unique styling, while the utility classes all remain the same.

Re: Tailwind: A Utility-First CSS Framework

#56

Post by TekMol »

adamwathan wrote: post #42
sleepychu wrote: post #35

Earlier quoted context omitted.

The problem I have is: what if I want to (for example) add a style or take it away from all my buttons? It's going to be a lot of manual fiddle, or is the idea that hand written sites are wrong to start with and I should be using generated code?

This is a totally real problem and one of the things that put me off of using some of the existing utility frameworks before creating Tailwind. With Tailwind, we don't try to pretend that you will never need to write any CSS, and instead embrace that fact and give you as much tooling and guidance as possible on how to extend the framework the way it was intended to be extended. In the situation you're talking about,…

    Then you could update all your buttons
    at once by making changes to that component class
Oh my god, that's genius!

I'm looking forward using this right away.

First of all for the wonderful experience to add a class to my buttons. I think I will call the class "button". But I'm open for other suggestions at well.

Second for learning your DSL. Curious what other clever tricks you invented.

And most of all I am sure I will love implementing a compilation step into my workflow to turn your DSL into actual html and css. It always felt a bit too lean to just change a style and reload the page.

Re: Tailwind: A Utility-First CSS Framework

#57

Post by [deleted] »

adamwathan wrote: post #15

Author of Tailwind here! If you haven't worked with a library like this before, I promise your gut reaction will be "holy hell this is the worst thing I've ever seen" (it was my reaction too!) You really do have to try it to shake that impression. If you need a bit more convincing before you're willing to try it, I wrote an in-depth article a while ago that documents my journey from a "semantic classes"-loving HTML/C…

[deleted]

Re: Tailwind: A Utility-First CSS Framework

#58

Post by jasim »

mikewhy wrote: post #51
jasim wrote: post #9

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: "Profile…

I mean a lot of those things were possible with bootstrap-sass years ago. > Define the essence of your design in a JSON - typography, colors, spacings, shadows, borders et al. _variables.sass > 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. This is true, but is solved by any sort of component system an…

_variables.sass works if you're using BEM. But now you have two component-like things: BEM classes, and the components themselves. BEM solves the issues inherent in nested CSS (cascade, inheritance, multiple selectors, specificity) by forcing us to never nest them, and instead having to name every single element in HTML. Though they look semantic, they are not truly reusable since they are coupled deeply with the markup. But with Tailwind, your component is your unit of abstraction and you don't have to name everything just for the sake of hooking up the HTML with CSS.

But you can even do BEM with Tailwind if you really want to with @apply.

> Why would you change a padding in multiple files when you can set `$base_padding: 10px`?

Neatly written CSS that uses variables for design scales are a good thing to have, but without any kind of tooling help, it is really difficult to keep it consistent. Tailwind on the other hand gives you the affordance for that - a "pit of success" because you never have to define magic values and instead use pre-defined functional CSS classes.

Regarding colors - you can use "text-quiet" or "text-title" etc. - the names are fully in your control and can be set in the configuration JSON file.

Re: Tailwind: A Utility-First CSS Framework

#59

Post by thinkxl »

I like Tailwind. I think the appeal here is to write less CSS, get things done faster, have a consistent design and the maintainability. All good so far.

But let's remind everybody that this is only one approach of many you can use.

One approach that can solve problems Tailwind tries to is proper planning. An initial style guide can show you that the `author-bio` component looks similar to `article-preview` (taken from the author's blog post[1]), so you beforehand plan for that HTML and CSS and create a component you can reuse.

Of course, you could have decisions made after the fact and go back and change stuff; nothing is bulletproof.

- [1] https://adamwathan.me/css-utility-classes-and-separation-of-...

Post reply on HN