Elastic UI – Component library for data-driven web apps

Tailwind UI has been on my radar for a while now. There are two reasons why I didn't dive into it yet:

* a very verbose approach to describing what you want: closer to describing how it should look like rather than what it is. That would mean a big rework of my application (quick check shows around 1200 places where Semantic UI constructs are used) or writing a "layer" that maps my app's semantic usage to Tailwind UI promitives.

* Tailwind is still JavaScript-heavy.

Here's an excerpt from my discussion with Talwind UI founder, which will perhaps help understand my point of view. I was describing something I would happily pay a significant subscription fee for:

"This actually isn't far from the truth, because I had actually landed on the Tailwind UI site first, without knowing about Tailwind CSS, and this is exactly what I had thought the deal was. Later I understood that Tailwind UI is a bunch of "snippets", basically examples of how to use Tailwind CSS, which I think is indeed a problematic value proposition.

However: to be honest, when I looked at the amount of low-level class information I would need to put in my source, I was not impressed. I would much rather use the Semantic-UI approach. And perhaps this is a hint for you: provide a higher-level interface, that way you won't end up with "snippets", but with maintained components, which changes the whole pricing equation.

In other words, to see what I would immediately pay for, look at Semantic UI. No need to "update snippets" there. I would pay for a CSS library that lets me build applications on a level similar to Semantic UI, with the ability to customize or theme components.

And it's not about an "installable dependency", either — in fact I fight very hard not to depend on any npm packages, and I had to build my own dockerized build system for Semantic UI because of their approach to building. What I'd like to get is basically a tarball which I could automatically unpack, drop in a config file and do a "make" to get the CSS deliverables.

I think there is a difference in thinking here: I am an application developer and looking from the outside I see the "web design community" as a bit of an echo chamber, with similar ideas being implemented over and over, and no clear path to revenue. At the same time, I can't buy the tools I need. I look at libraries like Bootstrap, Bulma, or Tailwind CSS, and I see the same thing: low-level tools for "web designers". It's too low-level! I don't want to "build bespoke designs without any annoying opinionated styles you have to fight to override" — I actually want a well-designed set of components (opinionated is good!) so that I can get on with delivering the functionality my customers actually pay for. So, forms, tables, menus, tabs, popups.

Let's look into my situation: I am not a designer and I don't have time for fiddling with details. What are my options? I can't use these low-level tools, not enough time. I can hire a designer: it is expensive, it's really difficult to find one that will understand what I need, work closely with the code I have, and be generally good. Or I can use a more high-level tool, which is how I ended up with Semantic UI. It's not that I'm crazy about the whole "semantic naming" aspect of it, it was just a well-designed and complete set of components that I could use immediately.

I don't know how big this market is, but I have this feeling that there is a big hole right now. Here's another guy like me: https://actualbudget.com/#features — I actually asked them how he got the nice-looking dense editable tables. He implemented them himself."

- It's way too verbose sometimes. There are numerous instances where I would have done just a single tag and Tabler has two or three of them nested.

- Some similar components are implemented in way different ways. Compare .status-indicator which takes color as a dedicated class (`.status-green`, for example) and .badge, which uses background-color helpers (e. g. `.bg-green`).

- Secondary buttons are .btn without additional class, unlike .btn.btn-secondary in Bootstrap (which Tabler is based on). If you add .btn-secondary, you'll get a weird out-of-style button. Things get more difficult when you use a Bootstrap-based library for some interactive elements (I'm using Sveltestrap) and it adds .btn-secondary by default.

- Some layout bugs get introduced and fixed, nothing you can't patch out though. Hope it will get better as it matures.

Overall it's neat though, and for prototyping things quickly I'd say it's the best you can get now.

Interesting that it's using react-window under the hood.

-- https://react-window.vercel.app/#/api/VariableSizeGrid