Live data from Hacker News

Tailwind UI

tailwindui.com

131–140 of 367 posts

Re: Tailwind UI

#131
post #5

It's really nice, but is there something this pretty for bootstrap? I literally manage something like 10 different products/websites. And the only way to stay sane and have some pace with features is to use bootstrap for all of them (we currently use bootstrap for maybe 5 of them, and the rest were inherited sites that we're migrating). I love the look of this but don't have the time or the will to migrate all our si…

There are many bootstrap themes that offer re-usable components. They are cheap and some are expertly maintained. Look into Color Admin by Sean Ngu.

This is excellent, thank you for the link. Any others you think highly of?

Re: Tailwind UI

#132

Earlier quoted context omitted.

It's as if one person was arguing for hard-line separation of style and content, and another person was arguing that in-line is the way to go, and then Tailwind came along and said, "Why not both?" So now it's the worst of both worlds: an abstraction layer and dirty code.

I think it's a little more subtle than you're saying. When you use inline styles for everything, you're making the initial development a little faster by making future maintenance and changes a lot harder. (Like, if you decide headings should be italic instead of bold, that's a one-liner fix if you're using CSS properly, but if you're using inline styles you have to individually fix every heading on every page.) So m…

Or each of your headings is a React/Vue/Web/Polymer/etc component and that's a single edit. Also, sed.

Re: Tailwind UI

#133
post #36

On the surface, the markup is pretty damn awful. But if you reach certain level of proficiency, this will definitely speed up development. Back End Developer Personally I would prefer Bootstrap over this approach.

At that point, you're basically just using inline styles. Don't get the real benefit of this library.

Re: Tailwind UI

#134

Tailwind has been great and I've been looking forward to this for months. I fought Tailwind as a concept pretty hard at first, but after hearing Adam and a few others raving about it I gave it a shot. It takes some getting used to at first but I can't imagine developing without it anymore. To me, the biggest benefit of Tailwind and utility classes in general is that it removes the cognitive overheard of having to thi…

Disclaimer: I haven't used Tailwind. Maybe I'm missing something. > For example, if I'm working on a card and I want some text below the main text to have a smaller, gray font size. What do I name that class? "card-sub-text", "card-sub-title"? No - don't even worry about it - "text-sm text-gray-700" and move on. What's the difference with "color: gray; font-weight: 700"? In this case I really don't have to care about…

"text-sm" is just font-size and text-gray is a color code, so the order of the classes doesn't matter either.

The biggest benefit of this over inline styles is that if I decide to change the color of "gray-700", since those colors come from a configuration, I only need to change it in my configuration.

It takes some getting used to of the rules, but after a day or two I don't even need to think about what the class names are.

Re: Tailwind UI

#135
post #12

When I first learned about Tailwind I though "wow this is amazing!", but it quickly became obvious I was more or less learning another "language", which I really didn't need when re-entering the crazy world of frontend. I might reconsider it again once I am more comfortable with what frontend has become, but that is still quite a bit away.

Tailwind's draw seems to be in its name -- it helps you work faster. So for people whose bottleneck is writing lots and lots of HTML/CSS, it's probably great.

I'm guessing most of the naysayers here work in the web applications world with component-based architectures, where the HTML/CSS is a small portion of the total time they spend coding, so they can't understand why someone would sacrifice readability, maintainability, and organization for speed on something that isn't a bottleneck for them. The thing is, it absolutely might be a bottleneck for agencies and other companies that need to build lots of custom sites.

Re: Tailwind UI

#136

Earlier quoted context omitted.

It's as if one person was arguing for hard-line separation of style and content, and another person was arguing that in-line is the way to go, and then Tailwind came along and said, "Why not both?" So now it's the worst of both worlds: an abstraction layer and dirty code.

I think it's a little more subtle than you're saying. When you use inline styles for everything, you're making the initial development a little faster by making future maintenance and changes a lot harder. (Like, if you decide headings should be italic instead of bold, that's a one-liner fix if you're using CSS properly, but if you're using inline styles you have to individually fix every heading on every page.) So m…

But can you realistically change the design centrally of something built only with utility css classes? If the class of an element doesn’t specify its semantics you cannot properly target it in a redesign without updating the markup.

Re: Tailwind UI

#137

The problem with this IMO is that some enterprising person will just use regular tailwind (or another utility-css framework like tachyons) and re-implement all of these components and give it out for free, circumventing the license and killing the value of this. Normally with themes it would be time prohibitive to do so, but the nature of utility-css is that it's relatively straightforward to implement each component…

> The problem with this IMO is that some enterprising person will just use regular tailwind (or another utility-css framework like tachyons) and re-implement all of these components and give it out for free, circumventing the license and killing the value of this.

No because I believe that for every enterprising person wanting to circumvent paying for software, there are that many people who want to support the entrepreneurial spirit Adam and company show, and pay for good work. That's what capitalism is suppose to be about at least, anyways.

Re: Tailwind UI

#138

Earlier quoted context omitted.

>if you buy into their philosophy you'll probably want a component-based design (web components, React, Vue, etc). With tailwindcss or tachyons you get some of the benefits of component frameworks without having to use component frameworks, because you can colocate html & "styles" in regular template based systems and scope sections on a page this way. Great DX if you need to render sections conditionally, e.g. for a…

What if you want every link (from the perspective of the user, not based on the tag type) to have the exact same style? How would you do that without some sort of build step with an atomic unit for a link? Isn't a section just a case of a component?

You could define the anchor element in the preflight.css file (normlize.css/reset).

Yeah, a section is a component, but in my book it also involves the visible page background where the element is located (you could override the page background with a section color), like a slice of the page.

Re: Tailwind UI

#139
in my opinion tailwind really only works when used with a component based framework like Vue, React or ActionView::Component. the issue to me is that you have to add sooooooooo many classes to make a button look good that you get fatigued very quickly. when using a component based, you can build a button component and just reuse that.

this isn't an issue with something like bootstrap where a single class makes a button look pretty.

Re: Tailwind UI

#140
post #36

On the surface, the markup is pretty damn awful. But if you reach certain level of proficiency, this will definitely speed up development. Back End Developer Personally I would prefer Bootstrap over this approach.

i've grumbled about this, too.

Tailwind recommends PurgeCSS, but i'll plug my own lib here:

https://github.com/leeoniya/dropcss

i have a specific section on how to handle tailwind's unorthodox classnames:

https://github.com/leeoniya/dropcss#special--escaped-sequenc...

Post reply on HN