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

41–50 of 367 posts

Re: Tailwind UI

#41

Post by rjknight »

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 final composition is incredibly easy.

Re: Tailwind UI

#42

Post by kristiandupont »

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.)

I had that same initial reaction when I first read about Tailwind.

I am now a convert and although it's hard for me to articulate exactly where the magic lies, these are contributing factors:

- You can do the entire thing in HTML quickly, including media queries and pseudo-classes.

- The predefined sizes and other values are granular enough that you can do just about everything with them, but coarse enough that you often get it right in the first shot. In a sense, it's a little like going from drawing a chart on blank paper to grid paper.

- Tailwind intellisense in VSCode shows you the colors you likely need.

Each of these points are tiny and could easily be achieved in another way, but combined they have increased my personal joy in frontend development quite significantly.

Re: Tailwind UI

#43

Post by tjholowaychuk »

zerkten wrote: post #29
benbristow wrote: post #22

Looks nice but sod paying $250 for some HTML & CSS.

You are clearly not their market, but there is a big market for this. That price is inexpensive when you look at the time and effort involved of building the same components from scratch, even though Tailwind is a pretty productive tool once you know it.

Yeah $250 is nothing if you're building a real product, fuck these cheap developers.

Re: Tailwind UI

#44

Post by agluszak »

Shouldn't there be a possibility for one class to extend other or to somehow include or merge classes, such that btn = rounded + shadow + p-4? This would allow you to use utility classes as building blocks for semantic ones.

(Disclaimer: I'm a backend dev and I don't know CSS well)

Re: Tailwind UI

#45

Post by oefrha »

This looks nice, but one question I have regarding licensing is that for the simpler and more "obvious" components, where's line between learning from their demo (when the code isn't locked behind a paywall) and having to purchase a license? Take "Wide Tables"[1] for example; I have built almost the exact same thing myself with Tailwind by learning from an (IIRC official) example before.

[1] https://tailwindui.com/components/application-ui/tables/wide

Re: Tailwind UI

#46

Post by saagarjha »

aosaigh wrote: post #40
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.)

The same comment is at the top of every post related to Tailwind. Read this section in the docs and try it out before judging: https://tailwindcss.com/docs/utility-first The core principle is that you wrap up all UI elements into components. Most frontend and backend/template frameworks allow you to do this. You then verbosely apply the Tailwind classnames to perform styling, staying out of custom .css files all toge…

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

Re: Tailwind UI

#47

Post by iovrthoughtthis »

agluszak wrote: post #44

Shouldn't there be a possibility for one class to extend other or to somehow include or merge classes, such that btn = rounded + shadow + p-4? This would allow you to use utility classes as building blocks for semantic ones. (Disclaimer: I'm a backend dev and I don't know CSS well)

There is. You can create new component classes that inherit from the base classes.

Re: Tailwind UI

#48

Post by iudqnolq »

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.

Re: Tailwind UI

#49

Post by patricius »

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.)

I use Tachyons, which is also utility-based (and, afaik, an inspiration to Tailwind). The primary improvement is that the amount of CSS you need to write is reduced by 90 % or more. Okay, but now you have to write and repeat all these CSS class names, so what have you gained? Not having to write CSS is more than enough for me, but another important thing is that you get all the information you need in one place to see how something is rendered. You also get that with inline styles, but they are much more verbose (at least compared to Tachyon's short class names), and there are some things that you cannot do with inline styles, but can do with classes. But you no longer have to go back and forth between the stylesheet and wherever you are performing your DOM-rendering to get an understanding of what's happening.

Tachyons has truly taken a lot of the pain of writing web applications away for me. It looks kind of ugly in the beginning, but I can't imagine going back to writing oodles of CSS again. Haven't used Tailwind though.

Post reply on HN