Hacker News Reader

Comment by gunshowmo | Hacker News Reader

Looks fantastic. My only concern using this in a full React project is its lack of interoperability with standard libraries. It seems like for the best experience, you either buy Tailwind UI to use with a tailwind project for anything except the most basic UIs, reimplement the Tailwind UI components yourself, or have a weird mix of css-in-js and Tailwind CSS. Although I love the idea of HTML-native inputs all the way through, I tend to immediately run into issues where using a native interface instead of a JS-based implementation harms the user experience.

Props to the team though - I feel like this is something I'll try out for a marketing site.

View on HN

> Although I love the idea of HTML-native inputs all the way through, I tend to immediately run into issues where using a native interface instead of a JS-based implementation harms the user experience.

The way HTML forms (in particular, but also things like tables) are stuck in a not even good for the time '90s level of functionality is an under-appreciated drag on all web development, IMO. So very much wasted effort, wheel-reinvention, brokenness (a11y, especially) et c. for shit that should have been built-in years ago.

> The way HTML forms (in particular, but also things like tables) are stuck in a not even good for the time '90s level of functionality is an under-appreciated drag on all web development, IMO

It absolutely is, but things are changing! Come help us get better form widgets built into browsers at at https://open-ui.org/.

The website's a bit behind, the Discord and GitHub issues are where most discussion happens. We need people who know hte pain points to help us.

You may be interested in Chakra UI (https://chakra-ui.com), which has low-level details (including default theming) basically identical to Tailwind CSS v2 but is built around css-in-js via Emotion.

Shameless self-plug but if you'd like the same idea but that works with native as well and has an optimizing compiler that outputs clean CSS at build-time, try Tamagui (https://tamagui.dev).

This looks fantastic! Looking forward to diving in a bit deeper.

I like Chakra...mostly. We have ran into some major performance issues with it all over our application though. The docs [1] make it sound like it's a rare issue, but we're not doing anything particularly wild and it became unusable at a point due to these issues. Now, we have a "no Chakra below this point" rule where certain parts of our application are not allows to use Chakra at all and use TailwindCSS + our own custom components instead.

[1] https://chakra-ui.com/docs/comparison#the-runtime-trade-off-...

Nice - I've seen a recent explosion of good libraries. I've seen Atlassian, Shopify, and others open source subsets of their own libraries as well.

Another less popular one that I have had my eye on for some time is Mantine. It seems very polished and composable.

You're right as it probably won't work well with MUI [0] (formerly React Material) and similar options like Ant [1]. But they all accept a theme provider that could hook in to the Tailwind config. Never tried it though.

But a swell of less opinionated offerings [2] [3] [4] (more and more the popular anyways) work well with Tailwind. In fact, when writing your own libs, exposing a className prop makes them painlessly customisable.

0 - https://mui.com

1 - https://ant.design

2 - https://www.radix-ui.com/docs/primitives/overview/styling

3 - https://react-table.tanstack.com

4 - https://react-spectrum.adobe.com/react-aria/

Thanks for these ideas! The react-aria seems quite interesting to develop a UI library library using Tailwind-styled elements while accounting for accessibility.

These days don't most popular React UI frameworks support passing classes to all the HTML elements they render?

They do based on what I've seen, you're right. I'm speaking more to the consistency of styling across the project, but if the UI library is separated out from the rest of the project then it shouldn't actually be a concern to compose the components with tailwind-styled elements.

Thanks for helping me think through it further!

Reply on news.ycombinator.com