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

Catalyst – Tailwind CSS Application UI Kit

tailwindui.com

Post reply on HN
Print view View original

201–210 of 215 posts

Re: Catalyst – Tailwind CSS Application UI Kit

#201

Post by smnm »

In 'Live preview' I casually inspected the the first button, and it has 63 classes, wow

  [data-slot=icon]]:-mx-0.5 [&>[data-slot=icon]]:my-0.5 [&>[data-slot=icon]]:size-5 [&>[data-slot=icon]]:shrink-0 [&>[data-slot=icon]]:text-[--btn-icon] [&>[data-slot=icon]]:sm:my-1 [&>[data-slot=icon]]:sm:size-4 forced-colors:[--btn-icon:ButtonText] forced-colors:data-[hover]:[--btn-icon:ButtonText] border-transparent bg-[--btn-border] dark:bg-[--btn-bg] before:absolute before:inset-0 before:-z-10 before:rounded-[calc(theme(borderRadius.lg)-1px)] before:bg-[--btn-bg] before:shadow dark:before:hidden dark:border-white/5 after:absolute after:inset-0 after:-z-10 after:rounded-[calc(theme(borderRadius.lg)-1px)] after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)] after:data-[active]:bg-[--btn-hover-overlay] after:data-[hover]:bg-[--btn-hover-overlay] dark:after:-inset-px dark:after:rounded-lg before:data-[disabled]:shadow-none after:data-[disabled]:shadow-none text-white [--btn-bg:theme(colors.zinc.900)] [--btn-border:theme(colors.zinc.950/90%)] [--btn-hover-overlay:theme(colors.white/10%)] dark:text-white dark:[--btn-bg:theme(colors.zinc.600)] dark:[--btn-hover-overlay:theme(colors.white/5%)] [--btn-icon:theme(colors.zinc.400)] data-[active]:[--btn-icon:theme(colors.zinc.300)] data-[hover]:[--btn-icon:theme(colors.zinc.300)] cursor-default" type="button" data-headlessui-state="">Button

Re: Catalyst – Tailwind CSS Application UI Kit

#202

Post by andruby »

AlchemistCamp wrote: post #193
andruby wrote: post #126

What's with all the negativity here on HN, especially about the pricing? The Tailwind team created one of the most used CSS frameworks ever and charge nothing for it. The framework needs a revenue stream to enable continued investment. Rails has basecamp. Bootstrap had twitter. React has meta. Tailwind has Tailwind UI. I find it great value. It's a one-off cost comparable to hiring a designer or front-end developer f…

I agree with you on the pricing. I'm a Tailwind UI customer and have found it more than worth the money. That said, it is disappointing to see recent work all tied to React. I generally prefer Phoenix LiveView (or Rails + Hotwire, etc) over a React/Angular/Vue approach. By tying it to React, they destroy most the value this kit would have otherwise had to me. They already earned my money, though. I still enthusiastic…

Yeah. I’m also not using React. Vue would be nice and so would Phoenix. I think they might add Vue support, as they do for headless-ui. Phoenix is less likely imo.

The paid nature makes it hard for the community to fill in that gap, which is a shame. I’d love to collaborate on a Phoenix version of Catalyst.

Re: Catalyst – Tailwind CSS Application UI Kit

#203

Post by tipiirai »

smnm wrote: post #201

In 'Live preview' I casually inspected the the first button, and it has 63 classes, wow [data-slot=icon]]:-mx-0.5 [&>[data-slot=icon]]:my-0.5 [&>[data-slot=icon]]:size-5 [&>[data-slot=icon]]:shrink-0 [&>[data-slot=icon]]:text-[--btn-icon] [&>[data-slot=icon]]:sm:my-1 [&>[data-slot=icon]]:sm:size-4 forced-colors:[--btn-icon:ButtonText] forced-colors:data-[hover]:[--btn-icon:ButtonText] border-t…

Is this called a single class in Tailwind: ”px-[calc(theme(spacing[3.5])-1px)]”?

Re: Catalyst – Tailwind CSS Application UI Kit

#204

Post by aabbcc1241 »

hoofhearted wrote: post #175
uxp8u61q wrote: post #162

Earlier quoted context omitted.

> one of the most used CSS frameworks ever Any evidence for this claim?

Tailwind and Hero Icons eclipsed Bootstrap and Font Awesome in NPM downloads a year or more ago.

The download count may not reflect the adoption rate. It is largely affected by CI/CD.

Re: Catalyst – Tailwind CSS Application UI Kit

#205

Post by realprimoh »

manojlds wrote: post #130
realprimoh wrote: post #90

Earlier quoted context omitted.

You are welcome to do it for free. The entire point of an UI library is to save time.. you can technically build anything you want for free if you don't value your time. This UI library sped up my dev time at least two-fold. The components and sample landing pages provided are really great IMO (and judging by their sales, it's not just me who agrees).

Point being it's incomplete and so you spend money AND time.

It’s not incomplete though. It has all the components you need to fully build a full-featured functioning web application fast.

I’ve shipped products with this kit without having to change much code because it’s very well-made.

Don’t take it from me - take it from the tens of thousands of devs who also use it.

The commenter above didn’t even look deeply into the actual offering. Catalyst is just one tiny (new) subset of the large number of things offered by the entire package.

Re: Catalyst – Tailwind CSS Application UI Kit

#206

Post by hoofhearted »

gedy wrote: post #192
hoofhearted wrote: post #186

Earlier quoted context omitted.

I should mention that I did a study about 6 months ago for a government client, and successfully convinced them to migrate away from Bootstrap 4, Font Awesome, and an in-house patchwork of 10 years of different css styles, to Tailwind CSS and Hero Icons in their mission critical app. It took many long brain dump sessions, and some help from the U.S. Digital Service and Tailwind themselves. At the end of the day, Tail…

Font Awesome and Bootstrap Icons can be inlined too?

No, that is where the efficiency in Hero Icons comes from.

Re: Catalyst – Tailwind CSS Application UI Kit

#207

Post by ehutch79 »

hoofhearted wrote: post #187
ehutch79 wrote: post #184

Earlier quoted context omitted.

Most people using bootstrap wern't getting it through npm. It was a script tag importing off a cdn.

ReactStrap is npm though. That was the last time I used bootstrap about 2-3 years ago before going all in on Hero Icons, Headless-UI, and css design tokens and utility classes (Tailwind)

I'm not sure what your point is.

My point was that a lot of use of bootstrap was through CDNs. Yes, there was plenty of npm downloads also. However comparing tailwind npm downloads vs bootstrap downloads is not a fair comparison of use.

They have different use cases and target audiences. A lot of people want to just chuck a button in a template and have it look in their internal tool that 3 people will see. They likely copied the dist/bootstrap.min.css file and never updated.

It's also likely all the users of server side frameworks like django or ruby on rails never setup npm in those projects, but certainly used bootstrap. It's less likely those projects would use tailwind because you need have a js buildstep for it unless you want to ship 10mb of css.

There's no denying tailwind is popular, but thinking npm is the only way people are getting css frameworks/libraries is flat wrong.

Re: Catalyst – Tailwind CSS Application UI Kit

#208

Post by smnm »

tipiirai wrote: post #203
smnm wrote: post #201

In 'Live preview' I casually inspected the the first button, and it has 63 classes, wow [data-slot=icon]]:-mx-0.5 [&>[data-slot=icon]]:my-0.5 [&>[data-slot=icon]]:size-5 [&>[data-slot=icon]]:shrink-0 [&>[data-slot=icon]]:text-[--btn-icon] [&>[data-slot=icon]]:sm:my-1 [&>[data-slot=icon]]:sm:size-4 forced-colors:[--btn-icon:ButtonText] forced-colors:data-[hover]:[--btn-icon:ButtonText] border-t…

Is this called a single class in Tailwind: ”px-[calc(theme(spacing[3.5])-1px)]”?

Don't know about Tailwind, but in DOM API it is definitely a single class.

Re: Catalyst – Tailwind CSS Application UI Kit

#209

Post by yieldcrv »

mock-possum wrote: post #81
yieldcrv wrote: post #48

Earlier quoted context omitted.

hey look everyone, someone that doesn’t need a job or to collaborate with anyone

That might be a realistic assessment but let’s not pretend the preponderance of react in the industry is a desirable state of affairs.

I really like Nextjs
Post reply on HN