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

51–60 of 367 posts

Re: Tailwind UI

#51

Post by ripley12 »

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.

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 found it to be well-designed and transparent enough to make it worthwhile.

Re: Tailwind UI

#52

Post by jmcharnes »

psychometry wrote: post #17
juretriglav wrote: post #2

I've been following this closely. Given the preview with some components listed it seems exceptionally well made: https://tailwindui.com/components There are also live demos of the app and marketing pages: 1. https://tailwindui.com/page-examples/landing-page-01 2. https://tailwindui.com/page-examples/detail-view-01# Plus a screencast on how to use it to build these pages: https://vimeo.com/393580241/82c6d7c5f6

All of these new frameworks look great, but there just isn't a good way to switch from, e.g., Bootstrap to a new one. I've never come across a framework that had any kind of conversion tool or even a guide on how to efficiently switch.

Jason McCreary from Laravel Shift made a tool called Tailwind Converter which will convert Bootstrap code to TailwindCSS. It's pretty wild. https://laravelshift.com/convert-bootstrap-to-tailwind-css

Re: Tailwind UI

#54

Post by devonkim »

chrshawkes wrote: post #9
philippbosch wrote: post #7

Earlier quoted context omitted.

Yes, but that's just because I think for simplicity they created one large CSS file that is used for all their components and example pages. That's not very realistic. You're not supposed to do it like this for your own project. Instead if you use Tailwind CSS and PurgeCSS I'm pretty sure you would end up with ~10 or 15 kB of CSS gzipped, maybe less.

I'm tired of excuses for inferior tooling. If you truly know CSS, Tailwind is a waste of time.

This kind of attitude, while totally relatable IMO as we grow frustrated with massive piles of crapware, is also how we wind up with NIH problems as organizations scale beyond just a few people. There is a very consistent theme by their creators across companies large and small - brilliant, productive, controlling, and eventually fired.

Re: Tailwind UI

#55

Post by lsinger »

ripley12 wrote: post #51
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.

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.

Re: Tailwind UI

#56

Post by k__ »

I read that Tailwind CSS is awesome, but not to be confused with how Bootstrap works, because Tailwind CSS is more low-level.

Does this mean, Tailwind UI is Tailwinds "answer" to that problem? Like, it's are direct Bootstrap competitor?

Re: Tailwind UI

#57

Post by cageface »

rjknight wrote: post #41
pcurve wrote: 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 find that the verbosity is annoying at first, but it makes it incredibly easy to come back to some old HTML and work out exactly what it's doing, and why. Even with Bootstrap, you need to maintain a mental model of what the classes are doing and how they compose, and each custom class adds more complexity to that mental model. Yes, Tailwind has lots of classes, but each class does one thing , so reasoning about the…

This exactly. With more traditional approaches it can be very difficult to find exactly what css rules are affecting what elements. Tailwind is more verbose but also requires a lot less context to understand what’s going on.

It also makes responsive styling a lot easier in my experience.

Re: Tailwind UI

#59

Post by nickjj »

iudqnolq wrote: post #48
nickjj wrote: post #14

I know this would be hard to pull off but I kind of wish we could see the small / medium / large views of each component as a preview. Right now it's not possible to tell what would happen when any of these components were resized since it's just a static image as a preview but responsiveness is one of the most important things to see.

They've implemented that, and have size sliders for some of the components. I presume the others are images so it's harder to steal the styling.

> They've implemented that, and have size sliders for some of the components.

It seems they've only done it for the ones they are ok with making freely available.

But that still leaves a vast majority of the components (almost all of them) as static images at 1 specific screen size.

They should consider adding screenshots of each size, or a few second gif / video showing how it looks at various breakpoints. Otherwise potential buyers (like myself) have no idea what things look like at each size. I don't mind a premium price but I'm not going to blindly buy it without knowing what the components look like beforehand. What it looks like is the most important thing for a CSS theme.

Re: Tailwind UI

#60

Post by Cthulhu_ »

psychometry wrote: post #17
juretriglav wrote: post #2

I've been following this closely. Given the preview with some components listed it seems exceptionally well made: https://tailwindui.com/components There are also live demos of the app and marketing pages: 1. https://tailwindui.com/page-examples/landing-page-01 2. https://tailwindui.com/page-examples/detail-view-01# Plus a screencast on how to use it to build these pages: https://vimeo.com/393580241/82c6d7c5f6

All of these new frameworks look great, but there just isn't a good way to switch from, e.g., Bootstrap to a new one. I've never come across a framework that had any kind of conversion tool or even a guide on how to efficiently switch.

Right now I don't think CSS frameworks are intended to be a drop-in replacement; each one will also introduce a subtle change in style that you have to work with. In theory you can rebuild your application reusing functional components and only replacing visual ones, but it's still going to be a lot of work.

But I think a lot of people wouldn't just replace the CSS framework, they'll rethink the whole UI and everything that goes with it with a big operation like that.

Post reply on HN