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

81–90 of 367 posts

Re: Tailwind UI

#81

Post by uk_programmer »

cageface wrote: post #61
saagarjha wrote: post #46

Earlier quoted context omitted.

This just seems like inline CSS with less verbosity. Where’s the semantic meaning?

In my experience trying to do semantic CSS just adds a lot of extra cognitive overhead and breaks down in the inevitable requirements churn every project goes through. I was skeptical of Tailwind too until I actually tried it. It’s one of those things like JSX that defies received wisdom but in real use is very nice.

> In my experience trying to do semantic CSS just adds a lot of extra cognitive overhead.

Do people really struggle with this?

    
        Heading
        Tagline
It far more straight forward just to call something what it is and you can actually read the CSS afterwards.

Re: Tailwind UI

#82

Post by sergiotapia »

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.

I'm kind of with you on this. We're rebuilding a large internal admin tool with all in house css and components, it's tiny and fast. We didnt want to bring in bootstrap or some other huge framework. Those were fine when I was a jr developer - not anymore

Re: Tailwind UI

#83

Post by juretriglav »

hadrien01 wrote: post #3
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

How did you access the page examples? I can't find a link to them on their components page.

They were linked to in a message via their mailing list.

Re: Tailwind UI

#84

Post by iKlsR »

newfeatureok wrote: post #71

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…

See https://tailwind.build for something that already exists and knowing the community that surrounds this, he will more than make a good return off it so no worries there for the work that has gone into it. ie. https://adamwathan.me/the-book-launch-that-let-me-quit-my-jo...

Re: Tailwind UI

#85

Post by deltron3030 »

iudqnolq wrote: post #39
efdee wrote: post #33

Judging from all the positive comments in this thread, clearly I must be missing something. This looks horrible to me. Instead of meaningful CSS classes you just get a bunch of small classes that do very small things, which you're supposed to combine until it looks like what you want. How is that better than writing your CSS manually? (Again, I realise the failure is probably on me. But I don't get it.)

Their argument is that the idea of separating content from presentation was always a lie, and that your JS, CSS, and HTML code is always intertwined. I've found this to be partly true for web apps. Tailwind is essentially unusable without a build step. You can configure it to make composite classes for common styles (button, card, etc.), but if you buy into their philosophy you'll probably want a component-based desi…

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

If you think in sections rather than individual components anyway, which tailwind kind of promotes by design, you don't gain that much with a component framework.

The actual CSS functions like an inverted triangle (see ITCSS) the utility classes access from the html, so you won't have any specificity issues because it's already sorted out by having the CSS in a fixed order.

Another advantage is portability of sections between modern frontend JS frameworks and template based systems, you can just copy and paste things around, which is harder if the information about the styles is separated from the html, and without a fixed inverted triangle like CSS structure.

Re: Tailwind UI

#86

Post by marc_io »

have_faith wrote: post #65
rjknight wrote: post #41

Earlier quoted context omitted.

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…

> Tailwind has lots of classes, but each class does one thing I think this masks a lot of complexity that you have to manage when taking on this approach. And it's not because the approach is good or bad, more what it is or isn't suited for. The example on the homepage is very slickly presented, but the end result markup is extremely verbose. If I have a Card component, I would like to update them all at once when ne…

You can work with components too, just use the @apply directive. https://tailwindcss.com/course/composing-utilities-with-appl...

Re: Tailwind UI

#87

Post by andrei_says_ »

have_faith wrote: post #65
rjknight wrote: post #41

Earlier quoted context omitted.

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…

> Tailwind has lots of classes, but each class does one thing I think this masks a lot of complexity that you have to manage when taking on this approach. And it's not because the approach is good or bad, more what it is or isn't suited for. The example on the homepage is very slickly presented, but the end result markup is extremely verbose. If I have a Card component, I would like to update them all at once when ne…

My sense is this is for people who do not know css to the level needed to implement BEM. Also, it replaces the cost of knowing css and naming things (class names) with the cost of learning the tailwindcss classes.

I will stick to BEM + colors and sizes maps because this feels almost like using the style tag on each element.

For non-css expert engineers writing spa components, tailwind can be useful.

I can also see that it’s not trivial to mix tailwindcss and scss processors so it’s a no for me.

It has the benefit to limit spacing and color sets to presets but I already do this in my BEM codebase.

Re: Tailwind UI

#88

Post by phponpcp »

Tomte wrote: post #13
psychometry wrote: post #10

Earlier quoted context omitted.

I'm sure that in an actual project, you can use tree shaking or a custom build to avoid including components you don't need.

Is there a production-ready CSS purger that's not written in JavaScript? Last time I looked I couldn't find any. I'm not particularly against JavaScript, but I'm not willing to install and use npm and several hundred dependencies. All documentation for purgecss always includes postcss and a gazillion other packages I have never heard of. Maybe something in Go, as a single executable?

"but I'm not willing to install and use npm and several hundred dependencies"

Good luck being a employable lol

Re: Tailwind UI

#89

Post by dmitriid »

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.

Try creating a similar set of components. Time yourself. Multiply with your hourly rate.

Re: Tailwind UI

#90

Post by tonyoaky »

newfeatureok wrote: post #71

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…

But isn't Tachyons already on github?
Post reply on HN