Comment by mgkimsal | Hacker News Reader

Comment by mgkimsal | Hacker News Reader

Parent Full thread

I've posted before, but will throw this out again.

When I'm building, I'm typically using a toolkit like vuetify or bootstrapvue. These are dozens of components - tested, documented, expanded on, and styled (using bootstrap or material design or... whatever).

The 'just to go tailwind!' I keep seeing seems to assume I want to rebuild components (and then test them) which already exist, and are designed to work together. The common refrain is "but all those sites look the same!" but... I can change colors, sizes, and... when needed, a bit more, by going in to the scss (or similar) and recompiling.

I understand the 'purge' stuff in tailwind is nice and useful (tested it firsthand) but the time/effort of rebuilding large sets of components (which are, often, by and large commodity things) is so far a hard sell for me. I was on a team last year that was in their second round of developing their own in-house UI toolkit - basically recreating most of bootstrap-react, but poorly, and with no testing or accessibility, because "bootstrap is bad". They were so far behind they thought they were ahead...

I'm just not grokking all the tailwind love. I've played with it, and yes... I guess anything that you learn and spend time with will, overtime, become 'natural' and save you time.

It's impressive tech, for sure - not trying to downplay it.

It sounds to me like you are just not the target for something like tailwind. My impression is that you are likely building displays that only require a few different UI components (and probably the ones we all see regurgitated over and over). The kind of UI where the star of the show is the information you are displaying rather than its behavior (of course there is a balance).

But for the kinds of applications I build there simply does not exist a “UI toolkit” that could save me any amount of time worth the hassle of ingesting another library and finagling it to my needs for what? Maybe 15% of my UI? The value in the tools that I build is partly in the UI I make to interact with them.

There is nothing more frustrating than the 5th or 6th time you just need the padding to be a little different to make your component pop, and you have to slog through the docs/source figure out how to adjust 2px...

What kinds of applications do you build? It sounds like having pixel perfect components that match exactly what the designers want is a really high priority for you. And that is fine but man it can really make dev go slower than using existing ones and I'm not always sure it's worth it.

I work in the fantasy sports domain with my primary focus building league management/draft software. I am both the "designer" and the developer of the tools I make. And I honestly wouldn't describe myself as someone who is overly pedantic about "design" in general.

But you may be surprised how often (and consequential) something as small as 2px padding, or line heights, or borders, or... [the list is just endless] can affect the final product. Especially once space starts becoming an issue (or you care at all about alignment).

The components of such software as the above are not "cards" and "lists" and "buttons", rather, it's "rosters" and "depth charts" and complex tables full of stats that need to be sliced and diced in all sorts of ways. A generic library (especially the kind that loves putting large swaths of spacing between things) is just not tenable.

Tailwind completely absolves the issues of managing literally hundreds of bespoke components on screen at once -- none of which can/should be reused in any sane sense of the word. Classic CSS quickly becomes a huge pain for the above. It's just... simpler to slap all of the styles inline right into the element. It took me no more than 2 days to become rather adept at using (and extending!) tailwind. At this point I simply cannot imagine doing it any other way.

I'm now building a back office/admin part of a site. The part where designers are rarely seen. And boy, does Tailwind help.

In that case wouldn't an existing component library be better? For something like that it seems function would be favored over design so you could get away with a generic looking component library.

My thoughts exactly. Especially if "do it exactly as non-dev design folks who don't actually ever write functional code decided it should be 3 months ago before they moved on to another project" isn't a requirement, something like vuetify gives a lot of functional and visual consistency (while providing standard support for a lot of accessibility stuff), in a tested and progressing toolkit.

A colleague consolidated new dev at his employer under vuetify and it took away some of the "design meetings", and allowed them to turn around projects faster (anecdotal, to be sure). All internal 'line of business' type stuff.

People keep mentioning vuetify. It implements Google's Material UI, and it's the last thing I ever want anywhere near a website.

Also, regardless of how extended component libraries are, they are still quite constrained in what they can do. Especially in layouts.

I mention vuetify as its faster to type than 'bootstrap-vue', but BSV is what I've used more. Used vuetify on one small prototype at the suggestion of some colleagues - some differences and nice aspects compared to BSV, but I default back to BSV for familiarity/speed/completeness. vuetify seemed to have some nicer defaults for accessibility compared to BSV, but it wasn't enough to make me switch (also, because... I'm not a huge MD fan either).

Often the developers have very little choice. They're handed a spec and told "go make this" and what they make has to be pixel perfect. Personally I think that very very few businesses actually need to do this, and adopting this way of thinking is backward and counter-productive (especially when perhaps more important things like accessibility are not even a consideration), what I think isn't the point.

You want a component library like Tailwind UI: https://tailwindui.com/

You're right though that a lot of people who jump straight to tailwind probably don't realize that its low level might be too low for their needs. A higher level component library like bootstrap, tailwind ui, chakra, etc. is a better start in many cases.

I actually bought this quite a while back. It is nice, but a far cry from what developers typically consider components. In fact they are just HTML that you have to copy and paste. You have to build the interactivity yourself. I think they have recently started integrating them into some JS frameworks though possibly.

React and Vue are both coming, in case you haven't seen already: https://tailwindui.com/react-and-vue-support/

Ah, yeah component makers are in a hard spot right now. You can't really write a 'generic' component easily and have to take a bet on using whatever JS framework is in vogue--react, vue, etc. It's not easy for a react project to pick up a vue component and use it or vice-versa. Even ignoring the framework incompatibilities, it also requires your component users to now buy in to the whole bundler game.

You could work around this by sticking with a generic, simpler framework like good ole jQuery. But now your framework users in react, vue, etc. are mad that they need to pull in kilobytes of JS that's doing what their framework already does.

So... as a component author a bundle of HTML and bring your own logic is kind of the only low-level option that's ubiquitous. Things might get better with web components, but it's not all there yet.

Ionic approaches this problem with stencil. So the ionic components can be used by not only angular projects, but also react / vue / vanilla js

Maybe they're hoping the community creates the framework-specific implementations?

Yes thats the intent. They handle only styling and framework integrations are upto the community

Inspect element - copy and paste with the Alpine JS intact.

Thank you. That's all it seems to be to me, and when people say "look at these components", it seems like they've not seen value in vuetify, for example.

I have bought this, too. It's great.

There is also a “free” site, which offers lovely designs: https://tailblocks.cc/

I made a comment above, which got downvoted, but, I'll try to explain a bit more. Looking at tailblocks site ... it's just html/css (verbose tailwind). Having lots of markup for input boxes that don't have any affordance for validation states, aria tags - that's a lot of code in those example blocks that still forces me to have to add lots more stuff to get some basic interaction functionality that's already provided by other toolkits (which, again, all use a common base and therefor all are styled similarly without the need for a lot of boilerplate css).

Someone posted above that tailwindui(?) will be providing react and vue components - that may be worth investigating later. Possibly too late for some current projects, but I'll keep an eye out.

It might not solve your problem. It does solve problems for other people like me though.

> I was on a team last year that was in their second round of developing their own in-house UI toolkit

Every team eventually tries this and fails to some degree, incurring costs along the way.

Also it's a lot like Akin's 39th law of spacecraft design:

https://spacecraft.ssl.umd.edu/akins_laws.html

But replace "launch vehicle" with "in-house UI toolkit".

It baffles me that people time and time again make the judgement that their several months of work are somehow more worth(in terms of effect) than literal man-years put into a decent UI library.

Yeah I'm in a similar position. None of the TailwindUI components have the logic built in, it's just the markup so you need to build the components yourself. I like the feel of Adobe Spectrum but it doesn't have exactly all the components that I want so I'd have to make my own components, and the styling looks somewhat complex to modify such that it doesn't look just exactly like theirs.

I'm looking into their react-aria and react-stately libraries which appear to just give you the hooks that power the UI components and then you can supply your own markup.

Tailwind has headless-ui coming out soon which appears to be very similar to the aforementioned two libraries so that may fill the void but it'd be nice to have a something now. At the moment I'm using Tailwind for mainly static informational sites rather than interactive UIs until I get around to making an internal library of components that I can style with tailwind css. At the end of the day it's basically just CSS anyway.

Reply on news.ycombinator.com