5 ms·

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 componen

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.

qbasic_forever 6y ago
You want a component library like Tailwind UI: https://tailwindui.com/ 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.
- weird-eye-issue 6y ago
  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.
  - mgkimsal 6y ago
    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.
  - davidwparker 6y ago
    React and Vue are both coming, in case you haven't seen already: https://tailwindui.com/react-and-vue-support/ https://tailwindui.com/react-and-vue-support/
  - qbasic_forever 6y ago
    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.
    - goodoldneon 6y ago
      Maybe they're hoping the community creates the framework-specific implementations?
      - vijaybritto 6y ago
        Yes thats the intent. They handle only styling and framework integrations are upto the community
    - aabbcc1241 6y ago
      Ionic approaches this problem with stencil. So the ionic components can be used by not only angular projects, but also react / vue / vanilla js
- wunderflix 6y ago
  I have bought this, too. It's great. There is also a “free” site, which offers lovely designs: https://tailblocks.cc/ https://tailblocks.cc/
  - mgkimsal 6y ago
    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.
    - wunderflix 6y ago
      It might not solve your problem. It does solve problems for other people like me though.
kingdomcome50 6y ago
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...
- weird-eye-issue 6y ago
  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.
  - dmitriid 6y ago
    I'm now building a back office/admin part of a site. The part where designers are rarely seen. And boy, does Tailwind help.
    - weird-eye-issue 6y ago
      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.
      - mgkimsal 6y ago
        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.
omniscient_oce 6y ago
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.
Tade0 6y ago
> 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 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.

qbasic_forever 6y ago

You want a component library like Tailwind UI: https://tailwindui.com/ 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.

weird-eye-issue 6y ago
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.
- mgkimsal 6y ago
  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.
- davidwparker 6y ago
  React and Vue are both coming, in case you haven't seen already: https://tailwindui.com/react-and-vue-support/ https://tailwindui.com/react-and-vue-support/
- qbasic_forever 6y ago
  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.
  - goodoldneon 6y ago
    Maybe they're hoping the community creates the framework-specific implementations?
    - vijaybritto 6y ago
      Yes thats the intent. They handle only styling and framework integrations are upto the community
  - aabbcc1241 6y ago
    Ionic approaches this problem with stencil. So the ionic components can be used by not only angular projects, but also react / vue / vanilla js
wunderflix 6y ago
I have bought this, too. It's great. There is also a “free” site, which offers lovely designs: https://tailblocks.cc/ https://tailblocks.cc/
- mgkimsal 6y ago
  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.
  - wunderflix 6y ago
    It might not solve your problem. It does solve problems for other people like me though.

kingdomcome50 6y ago

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

weird-eye-issue 6y ago
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.
- dmitriid 6y ago
  I'm now building a back office/admin part of a site. The part where designers are rarely seen. And boy, does Tailwind help.
  - weird-eye-issue 6y ago
    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.
    - mgkimsal 6y ago
      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.

omniscient_oce 6y ago

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.

Tade0 6y ago

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