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

Tailwind UI

tailwindui.com

Post reply on HN
Print view View original

291–300 of 367 posts

Re: Tailwind UI

#291

Post by rawfan »

tomc1985 wrote: post #246
mike1o1 wrote: post #125

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…

How is that any different from setting CSS in the style attribute of your tag? What happens when you need to update all the "text-sm text-gray-700" to something else? Seems like a step backwards at worst and identical to Bootstrap/Foundation at best. Everyone provides class primitives like that What you're describing offends separation-of-concerns

Concerns are not separated in the first place. Your CSS is heavily tied to the structure of your HTML and you even need to artificially think up structures to be able to write and apply the CSS. I recommend reading Adams blog post on the topic.

Regarding style attribute. You can’t do responsive-ness, hover- or focus-states in style attributes.

It’s hard to compare to bootstrap and the like because they give you components, while Tailwind is just a different way of writing CSS. You can of course extract components, btw, and define stuff like text-primary (that you can change in a central variable).

Re: Tailwind UI

#292

Post by rawfan »

lsinger wrote: post #55
ripley12 wrote: post #51

Earlier quoted context omitted.

I had a different experience – Tailwind made CSS a lot more approachable for me. A big part of Tailwind's value is that it provides a curated, well-documented subset of the most important CSS attributes. The utility classes are consistently and concisely named (unlike many native CSS properties, which grew organically). You're totally right that it is yet another abstraction, and that can be tiring. Personally I foun…

The documentation alone is great — it helped me learn things about CSS I had been kind of using but had never fully grasped.

100% agree. I learned more about CSS in the Tailwind docs than in all the years I copy and pasted before starting with Tailwind.

Re: Tailwind UI

#293

Post by erikig »

makeee wrote: post #255
misiti3780 wrote: post #226

Earlier quoted context omitted.

looks decent, have you used it? any opinions?

I should have mentioned that I created it.. so I'm a bit biased. You can see some opinions in our Show HN awhile back though: https://news.ycombinator.com/item?id=20688044

I remember seeing this earlier, looking forward to the passportjs authentication integration.

Re: Tailwind UI

#294

Post by rawfan »

sandGorgon wrote: post #152
dinkleberg wrote: post #69

Earlier quoted context omitted.

Tailwind UI is not a theme, it's a component library. The target audience is different. I bought this the moment I got the email about it this morning because this is going to help my productivity in building web applications. When you use Tailwind, you aren't using a pre-made theme as you would with a bootstrap theme you buy, you are designing it from scratch. With this UI kit you'll get some nice building blocks to…

Not to be an ass, but so is Ant design or Semantic UI. I honestly think this is priced too high.

Compared to what? If you look at any agency license (use on as many sites as you want) for themeforest WordPress themes, they are about the same price, if not higher. I guarantee you, they‘ll make a million bucks on launch day!

Re: Tailwind UI

#295

Post by luketheobscure »

Tailwind is fantastic. Everyone goes through the initial shock of complaining about the "ugly markup", the violation of separation of concerns, etc. But I've worked in enough large codebases to tell you that the ones that use Tailwind have a more consistent UI, with much less handwritten CSS. Bootstrap sites inevitably devolve into a soup of custom CSS and Bootstrap framework. You end up with lots of verbose class declarations like "btn btn-link btn-primary btn-xs danger", but you still need lots of little `margin-left: 3px` rules to push and pull things into place. Most other CSS libraries suffer the same fate.

On the other side of things, sites without a framework generally opt for a convention like "BEM" (block-element-modifier). BEM seems to be the worst of both worlds, both abandoning the "cascading" part of "Cascading Style Sheets" and still requiring verbose class names!

I've been working on a Tailwind project for the last six months with a team of around 8 people. We did a bunch of initial work getting the Tailwind config just right and some base styling in place, but since then we've barely written a line of CSS. Yes, the templates are verbose, but they are also incredibly readable and easy to reason about what classes are doing what. On-ramping new people has been easy as well, since they don't have to learn some custom system, instead they can just read the docs on the Tailwind site.

Re: Tailwind UI

#296

Post by lxe »

joaodlf wrote: 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.

It's just CSS classes. You do style="p-4" to make a horizontal padding. It's the simplest thing to learn -- by a long shot compared to most UI libraries everyone has been cooking up lately.

Re: Tailwind UI

#297

Post by manigandham »

tomc1985 wrote: post #246
mike1o1 wrote: post #125

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…

How is that any different from setting CSS in the style attribute of your tag? What happens when you need to update all the "text-sm text-gray-700" to something else? Seems like a step backwards at worst and identical to Bootstrap/Foundation at best. Everyone provides class primitives like that What you're describing offends separation-of-concerns

Reality is more important than technical purity. CSS styles and HTML structure are not separate concerns but tightly integrated in most projects.

Using Tailwind (or other atomic css frameworks) makes it easy to reason about styling while staying completely inside HTML during editing. Within a few days, you quickly memorize all the names and can build complex visuals while also benefiting from the well-designed default sizes and options.

Re: Tailwind UI

#298

Post by keithnz »

ecmascript wrote: post #70

Looks sexy but damn that's expensive. $250 for some pre-built styles I probably need to edit a lot anyway. I rather use a free option like https://semantic-ui.com/ than pay that much. Maybe if you are company but it doesn't really work if you are a solo dev or using it for a side project.

More importantly, I think it should be open source so various people can help build up components that work well together.

Re: Tailwind UI

#299

Post by neovive »

tomc1985 wrote: post #246
mike1o1 wrote: post #125

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…

How is that any different from setting CSS in the style attribute of your tag? What happens when you need to update all the "text-sm text-gray-700" to something else? Seems like a step backwards at worst and identical to Bootstrap/Foundation at best. Everyone provides class primitives like that What you're describing offends separation-of-concerns

I was turned off to Tailwind at first, but after watching the screencasts[1] the workflow started to make sense. I personally find writing good CSS/Sass from scratch very tedious. For something as "simple" as styling, there are many decisions to make regarding naming conventions, modularization/file structure, specificity, design systems, etc. I almost always opt for pre-built frameworks like Bootstrap or Bulma, but as my projects grew in size, I find myself battling with the framework to customize the components.

I don't think Tailwind is perfect, but find the benefits of consistent naming, easy modifications, and the "instant" design system, more than outweighs the negatives of utility classes. The framework also feels very light since there's no need to preprocess potentially hundreds of Sass files and I can just modify the view template or component directly. PurgeCSS also works amazingly well with Tailwind.

Adam, Jonathan, and Steve are also generous contributors to the opensource community!

[1] https://tailwindcss.com/screencasts/

Re: Tailwind UI

#300

Post by karatestomp »

jacobsenscott wrote: post #230
rado wrote: post #4

Earlier quoted context omitted.

Looks good and polished, but that landing page requires 165 KB of CSS, gzipped. That's, to put it lightly, ridiculous.

Congratulations on building your time machine. And welcome to 2020. 165kb is nothing these days and only takes a fraction of a second to download and processes even on a slow computer. You're going to find all kinds of other cool cool stuff you didn't have in the 90's. Did you know you can build and deploy an entire application without ever running a compiler or touching a physical machine now? We have REPLs were you…

REPLs are not new. At all.

165KB is still a lot of pretty-making text. Attitudes like that are why "webapps" eat hundreds of megabytes of memory for tasks where low-tens would be more than enough, even allowing for some slopping programming and lots of abstractions. That 165KB hangs around in memory in probably more than one form, and becomes part of future layout decisions on the page, if they come up.

Post reply on HN