Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Konsta UI – Mobile UI Components Built with TailwindCSS

konstaui.com

Post reply on HN
Print view View original

231–240 of 243 posts

Re: Konsta UI – Mobile UI Components Built with TailwindCSS

#231

Post by kaba0 »

nicoburns wrote: post #125
Kiro wrote: post #98

Earlier quoted context omitted.

What you describe is not representative of how CSS is maintained in most companies. You always end up in a situation where it's impossible to track down what styles affect what elements so you start overriding and duplicating because you're afraid to touch existing CSS.

How can it ever be impossible to track down styles? The browser dev tools will tel you exactly which styles apply to which element.

Come on, do you honestly gonna tell people that just because a Turing-machine somehow managed to untangle that mess, it is humanly parsable? Most sites are not HN with like 3 lines of CSS, dev tools will list you like 10s of different rulesets that together determine the output — of course one can see what’s the end result, but now try changing some property that gets applied by multiple rules. That can get very difficult/impossible since you may not have control over every stylesheet.

Re: Konsta UI – Mobile UI Components Built with TailwindCSS

#232

Post by kaba0 »

deergomoo wrote: post #186
kytazo wrote: post #80

On the tailwind argument I don't really feel like ever going back in spending a good 2 minutes coming up with a non conflicting yet descriptive class name only to end not using it at all cause I decided to implement the requirement in a different way. Not to mention the relief from the constant css/html context switch you undergo indefinitely. I can't really comment on how it scales in big projects tho.

I always find the criticism of localised styles and so-called separation-of-concerns violations amusing, given that the vast majority of user interface APIs to have ever existed have you set the styles directly on the elements. I think there’s maybe a few desktop UI APIs that use a similar approach to CSS, but having a separate declarative style sheet is almost unique to the web in the grand scheme of things. I guess…

Desktop UI APIs had/has the benefit of some OOP inheritance and a good set of standard components, plus separating layouts from styling. The web has only recently caught up with 2nd, and solved the 3rd in its own way - but it really is funny how insane amount of work is needed to have a custom date picker on the web vs on even something like WinForms.

Re: Konsta UI – Mobile UI Components Built with TailwindCSS

#233

Post by frosted-flakes »

kaba0 wrote: post #218
frosted-flakes wrote: post #210

Earlier quoted context omitted.

One of my most-used utility class is "reset". Default styles are great, but they often get in the way, so I'll throw this on an element whenever I want to start from a blank slate, alongside other utility classes or a custom class. This can significantly cut down on the length of my CSS files, as well as make them much less brittle and less dependent on the HTML structure, because I don't need to repeatedly undo defa…

That’s pretty much what tailwind does without any boilerplate.

No, Tailwind erases pretty much all browser styles automatically. I use my "reset" class far more selectively, and there's no boilerplate involved.

Re: Konsta UI – Mobile UI Components Built with TailwindCSS

#234

Post by dmitriid »

satvikpendem wrote: post #216
dmitriid wrote: post #215

Earlier quoted context omitted.

> However, if you're using HTML without a JS framework, Tailwind can be superior to BEM and global styles, but still not as much as CSS modules, CSS-in-TS, and the like, due to maintainability concerns. How are you going to maintain consistent values across components such as spacing colors etc? Those tend to grow to the size of Tailwind

We have our own design systems, and we'd just use regular CSS classes instead.

So how is it different from Tailwind?

Every design system I've come across contains any combination of:

- rigid inflexible components that need complex overrides even for the simplest cases

- multiple classes with seemingly innocuous names like "col col-8" that get increasingly obtuse and one-off like "uxg-menu-header uxg-avatar-hero-block uxg-avatar" [1] or "fas fa-fw fa-bell pf-c-alert pf-m-info pf-c-alert__title" [2]

- multiple often contradicting css variables (esp. colors)

- ... i'm missing something else, but it's late here and my brain doesn't work ...

[1] Design system by some new age finance company: https://design.fusionfabric.cloud/components/app-bar?tab=dev

[2] Opensource design system by RedHat https://www.patternfly.org/v4/components/alert/html

Re: Konsta UI – Mobile UI Components Built with TailwindCSS

#235

Post by mekster »

agloe_dreams wrote: post #187
kytazo wrote: post #80

On the tailwind argument I don't really feel like ever going back in spending a good 2 minutes coming up with a non conflicting yet descriptive class name only to end not using it at all cause I decided to implement the requirement in a different way. Not to mention the relief from the constant css/html context switch you undergo indefinitely. I can't really comment on how it scales in big projects tho.

This. And for big projects it comes with the advantage of locking everyone into the tailwind.config. Everything has tradeoffs. But to me, removing the context switch is like an ADHD cheat code. I’ve grown to enjoy the ability to look at one block and know exactly what it looks like as well. There’s no key value search to know why some bit of text is red for example.

Funny it took humans 20 years to figure that out.

Re: Konsta UI – Mobile UI Components Built with TailwindCSS

#236

Post by antihero »

satvikpendem wrote: post #86
mort96 wrote: post #74

Earlier quoted context omitted.

So it's a criticism which applies to literally every use of some library or framework to make writing web apps easier.

Sure, you could see it that way. That's generally why I also don't use libraries that haven't shown themselves to be durable; I'll use React because it's ten years old and has enough support so that if people do decide to migrate later on (due to technological improvements à la jQuery to pure JS and TS), it's easy to do so, and it's why I don't use much newer libraries like Svelte or SolidJS.

How exactly do things get proven to be durable if people don't use them in the first place?

Re: Konsta UI – Mobile UI Components Built with TailwindCSS

#237

Post by antihero »

nailer wrote: post #213
satvikpendem wrote: post #209

Earlier quoted context omitted.

Similar to Vue then, looks like. For me, CSS modules or CSS-in-TS solves our scoping problems in React.

Yes exactly. If react included scoped styles out of the box conflicts would be rare and tailwind would be far less popular.

Not really, you have intellectually missed some of the key reasons for Tailwind and why it's popular.

Re: Konsta UI – Mobile UI Components Built with TailwindCSS

#238

Post by esperent »

crubier wrote: post #177
esperent wrote: post #133

Earlier quoted context omitted.

Not in the slightest, tailwind even have their own UI library. Theirs is unstyled but there's nothing wrong with creating one with default styles.

Tailwind does not have their own UI library as reusable self-contained components. Instead Tailwind UI gives you the source code of these components so you can customize them to your needs. I much prefer that approach to that of pre-baked rigid components

I meant this one:

https://headlessui.com/

Re: Konsta UI – Mobile UI Components Built with TailwindCSS

#239

Post by satvikpendem »

antihero wrote: post #236
satvikpendem wrote: post #86

Earlier quoted context omitted.

Sure, you could see it that way. That's generally why I also don't use libraries that haven't shown themselves to be durable; I'll use React because it's ten years old and has enough support so that if people do decide to migrate later on (due to technological improvements à la jQuery to pure JS and TS), it's easy to do so, and it's why I don't use much newer libraries like Svelte or SolidJS.

How exactly do things get proven to be durable if people don't use them in the first place?

People can use them, I don't though.

Re: Konsta UI – Mobile UI Components Built with TailwindCSS

#240

Post by bobthepanda »

dmix wrote: post #212
bobthepanda wrote: post #30

Earlier quoted context omitted.

Css in JS (as in, inline styles) is just going to be a lot worse than class names because JS is fundamentally performance bottlenecked way harder than CSS is.

Can you explain what you mean by this? Do you mean just generating hundreds of strings (with long atmoic class names) to style each component vs loading a global CSS? IDK about React but Vue also has things like scoping, where the elements get unique IDs appended as data tags so you don't have to worry about CSS global scope clashes. Plus with Webpack/Vite the CSS automatically gets extracted and via HTTP2 only loads…

It used to be, that CSS-in-JS meant people naively writing something using a computed string to use the HTML style attribute, like so

    var style="color:blue;text-align:center;"
    return
and some CSS in JS frameworks compile down to pretty much that. However, this is a bad practice, because you will consistently see worse performance than just using css files and classnames instead.
Post reply on HN