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

211–220 of 243 posts

Re: Konsta UI – Mobile UI Components Built with TailwindCSS

#211

Post by dmix »

conradfr wrote: post #109
dmix wrote: post #25

Earlier quoted context omitted.

This is just unfamiliarity IMO. This is a component you reuse across tons of sites, it's not a one off component you're building for yourself. It's also not just a CSS framework like Bootstrap. This is full CSS + JS component's with functionality, Vue/React/Svelte framework integration, and events built in. Whether css-in-JS as a whole makes sense beyond these generic component type systems is a good question. There'…

Bootstrap has JS components. And utility classes.

Sure true, in the old jquery plugin sort of way, I forgot that. Although that's not really what people call JS component's these days with Web Components/react/Vue sort of styles mixed with JS within the self-packaged components rather than a CSS framework with a couple optional jquery plugins.

Unless they modernized it in recent years, haven't used it in 5yrs.

Re: Konsta UI – Mobile UI Components Built with TailwindCSS

#212

Post by dmix »

bobthepanda wrote: post #30
dmix wrote: post #25

Earlier quoted context omitted.

This is just unfamiliarity IMO. This is a component you reuse across tons of sites, it's not a one off component you're building for yourself. It's also not just a CSS framework like Bootstrap. This is full CSS + JS component's with functionality, Vue/React/Svelte framework integration, and events built in. Whether css-in-JS as a whole makes sense beyond these generic component type systems is a good question. There'…

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 the tiny JS and CSS files needed only for the components used on the page.

In that case giant blobs of CSS and JS would be less efficient.

Re: Konsta UI – Mobile UI Components Built with TailwindCSS

#213

Post by nailer »

satvikpendem wrote: post #209
nailer wrote: post #181

Earlier quoted context omitted.

Svelte, which is fairly mainstream these days looking at state of js, scopes your styles to the component. So global styles are very rare and usually a bunch of branding variables these days. Like a lot of bad solutions in tech, tailwind seems to exist as a workaround to the core issue of ‘still using react’.

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.

Re: Konsta UI – Mobile UI Components Built with TailwindCSS

#214

Post by testTED »

Aeolun wrote: post #192
twism wrote: post #189

Earlier quoted context omitted.

Problem is tailwind is not hard to maintain. I would argue it's easier. Folks look at it and it looks like a nightmare (the documentation even says so) but you have to actually give it a fair shake. I can always jump back into a tailwind codebase and not only do I know what mr-4 does I know where it is when looking at the rendered component. You find yourself having to do "Right click > inspect" a whole lot less ofte…

> You find yourself having to do "Right click > inspect" a whole lot less often to figure out what's going on Instead I find myself going to the Tailwind docs to find out how they renamed this random css property. But it’s still better than plain CSS.

Please elaborate.

Re: Konsta UI – Mobile UI Components Built with TailwindCSS

#215

Post by dmitriid »

satvikpendem wrote: post #201
dmitriid wrote: post #197

Earlier quoted context omitted.

> So, the same as Tailwind then? Worse. With Tailwind you have a consistent set of classes scoped usually per component. Thos p-x, m-x, and others don't change from component to component or from project to project. Hell if I know what `.chip-text__content` is, how it's different from `.icon-button__content`, why it interferes with my CSS, and what other 15 CSS classes I need on top of that to make it work.

I think there is a disconnect between what I'm talking about regarding CSS and what everyone else is. Yes, BEM and global styling is unmaintainable, I agree with you there. However these days even with Tailwind their approach is to componentize. In the same way, I can just use CSS modules with no global styles and get the same benefits of scoped styling like Tailwind provides without having something else break as a…

> 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

Re: Konsta UI – Mobile UI Components Built with TailwindCSS

#216

Post by satvikpendem »

dmitriid wrote: post #215
satvikpendem wrote: post #201

Earlier quoted context omitted.

I think there is a disconnect between what I'm talking about regarding CSS and what everyone else is. Yes, BEM and global styling is unmaintainable, I agree with you there. However these days even with Tailwind their approach is to componentize. In the same way, I can just use CSS modules with no global styles and get the same benefits of scoped styling like Tailwind provides without having something else break as a…

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

Re: Konsta UI – Mobile UI Components Built with TailwindCSS

#217

Post by kaba0 »

satvikpendem wrote: post #95
siquick wrote: post #93

Earlier quoted context omitted.

> And have you had to work on hundreds of components that you had to refactor before? It's a write only language. Once you know the syntax of Tailwind you can jump into any codebase and instantly know what’s going on. With “standard” CSS you’re forever jumping between components and class definitions.

Once you know the syntax of CSS properties you can jump into any codebase and instantly know what’s going on. With Tailwind you’re forever jumping between components and figuring out what that one long line of class names is actually doing.

No, one is a restricted subset of the other, and that means you can better reason about a less expressive language. This is basically what you would have with a non-Turing complete language vs Turing complete one.

Re: Konsta UI – Mobile UI Components Built with TailwindCSS

#218

Post by kaba0 »

frosted-flakes wrote: post #210
satvikpendem wrote: post #206

Earlier quoted context omitted.

That's a good way to do it personally, and I might start taking that approach too. The Tailwind syntax for some of the more complex stuff is appalling.

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.

Re: Konsta UI – Mobile UI Components Built with TailwindCSS

#219

Post by kaba0 »

satvikpendem wrote: post #39
NayamAmarshe wrote: post #37

Earlier quoted context omitted.

[flagged]

Using it wrong on every codebase that wasn't even made by me but instead by my employers? If it's happening that many times, the tool is to blame. More likely that the people who use it and like it (for now) have never have to handle large amounts of components and refactoring them. It's basically impossible. Trends come and go, who's to say that in a few years we decide, like jQuery, that hey, maybe this utility fir…

> Using it wrong on every codebase that wasn't even made by me but instead by my employers? If it's happening that many times, the tool is to blame

Wait, are we talking about CSS? Because I have yet to see a big enough application where the CSS wasn’t some “whack-a-mole” game when you had to change something supposedly locally.

Re: Konsta UI – Mobile UI Components Built with TailwindCSS

#220

Post by kaba0 »

satvikpendem wrote: post #61
antihero wrote: post #59

Earlier quoted context omitted.

The idea of approaches changing and becoming obsolete and having to be changed is a natural part of software. Shouldn’t stop innovation. TW works well for many experienced people who are very happy with it.

If it's real innovation, like jQuery imperatoveness to React et Al's declarativeness, sure I'd agree with you. But Tailwind is simply not innovation, it's at best repackaging normal CSS properties that when composed together act just like...regular CSS classes. So there's literally no point in using them. For example: https://twitter.com/stolinski/status/1613699772111638530

“High-level languages at best repackage normal machine code instructions that when composed together act just like.. regular machine code. So there's literally no point in using them“

Not having CSS inheritance anywhere already make it much much better. Sure, it is not novel, but it does fix many warts of “normal CSS”.

Post reply on HN