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

Building React and Vue Support for Tailwind UI

blog.tailwindcss.com

Post reply on HN
Print view View original

61–70 of 122 posts

Re: Building React and Vue Support for Tailwind UI

#61

Post by willhoyle »

This is great work, congrats on shipping a great product. I use TailwindCSS on my personal website.

I often wonder whether we need yet another UI framework implementation? I touched on this in my post a couple days ago: https://williamhoyle.ca/blog/2021/vue-has-too-many-ui-framew...

To summarize:

We have 20+ UI frameworks written in Vue. Surely there's enough common ground/code to combine the implementation details for all these common components. For example, OP mentioned the complexities of implementing a modal with some corner cases for 'ESC' behaviour. This is a universal concept whether you're using WidgetUI or TailwindUI. How many times are we going to re-implement a modal/button/dialog/menu?

We have to learn another set of APIs, props, component names, etc... Of course, no one is forcing us to use this. But it seems like we're going in circles re-implementing the same UI patterns over and over again.

I wish we could standardize on a library. Imagine just pulling in GenericUI and sprinkling in your CSS of choice (e.g. tailwindCSS, Bulma, Material, etc...).

I'm a Vue guy, but I think my argument still stands for the React ecosystem.

Re: Building React and Vue Support for Tailwind UI

#62

Post by BigJono »

mike1o1 wrote: post #41
734129837261 wrote: post #38

Tailwind is the weirdest thing I've ever ran across. It's basically inline CSS. Personally, I write CSS this way: 1. Select based on cascaded semantic HTML elements; 2. Don't repeat yourself; 3. No unnecessary classnames; 4. No style-descriptions in classnames. Only when you have troubles selecting an element based on its position in your DOM you should choose a classname. It should not be ".text-gray-500" (like Tail…

This comes up almost every time, but it's not "basically inline CSS". The best thing about Tailwind (and utility classes in general) is that it forces you to use consistent measurements across your app. "Shoot, was this 13px padding or 14px padding on the other page?" Don't worry about it, just use "p-4, p-6, etc.". Thinking in these terms becomes really powerful. Another great thing as that you just simply don't hav…

Who uses 13px for anything? I literally don't get this. Just remember to use a multiple of 4px? Or 0.25rem? Or whatever your designer is desinging to? This is solved with a 5 second conversation at the start of a project. Why the fuck do you need a library?

Legitimate question. How do you remember not to use "p-4.25" without npm installing tailwind-default-constraints or whatever the fuck?

Re: Building React and Vue Support for Tailwind UI

#63

Post by gervwyk »

welder wrote: post #27
leadingthenet wrote: post #26

Earlier quoted context omitted.

> How do you remember the names of all your classes? You don't. https://tailwindcss.com/docs/extracting-components

So, the dev never reads/modifies the extracted component that still uses hard-to-read hard-to-typecheck classes? Doesn't seem like a good solution.

It’s a great solution. Every class only maps to one css property setting, and they are very well named.

Thus not much more difficult to read and remember than css key value pairs.

Why would you typecheck component class names? If so, its all strings, seems pretty easy less error prone than inline styles.

Re: Building React and Vue Support for Tailwind UI

#65

Post by tasogare »

willhoyle wrote: post #61

This is great work, congrats on shipping a great product. I use TailwindCSS on my personal website. I often wonder whether we need yet another UI framework implementation? I touched on this in my post a couple days ago: https://williamhoyle.ca/blog/2021/vue-has-too-many-ui-framew... To summarize: We have 20+ UI frameworks written in Vue. Surely there's enough common ground/code to combine the implementation details f…

> I often wonder whether we need yet another UI framework implementation?

Because the web wasn’t designed for applications UI interfaces (hence the CSS grid which landed only in 2017), so it lacks basic primitives and behaviors that are then re-implemented slightly differently by different people. On the contrary, a UI framework designed for this such as the Windows Forms on Windows desktop is still very usable (and used) to make applications, 20 years after its release; and is only concurrenced by a single newer framework (WPF) which actually brings a lot of improvements on the table.

Actually the web does it half-way: there are a set of common elements (input text, button, etc.) but some useful components are missing, and some of the existing one are hard to style. This support should be added in browsers, then custom code wouldn’t be needed anymore.

Re: Building React and Vue Support for Tailwind UI

#66

Post by dmt0 »

switz wrote: post #39
natural219 wrote: post #21

Earlier quoted context omitted.

Blurring the line between attributes/react props and CSS classes seems abhorrent to me, but just my two cents

I've found a lot of success abusing a styled-system Box (+ Flex/Grid) component. It's like a more mature, flexible tailwind that allows complex integrations and much more dynamic styling, not to mention extremely simple media query adjustments. I know it's not the right system for everyone, but it's the best styling/layout framework I've ever used. You can have it span as much functionality or as little as you want.…

I also like styled-system a lot. It's too sad that it was essentially abandoned. Theme-UI seems like a replacement that most people are moving to, but I doubt that it will be maintained for years to come either.

Re: Building React and Vue Support for Tailwind UI

#67

Post by JohnCurran »

pansa2 wrote: post #59

I'm currently using Tailwind CSS to style a fairly simple static website that's being generated using Hugo. I've been considering using some Tailwind UI components, e.g. modals (in particular, lightboxes to show zoomed-in versions of images). I assumed that I would use Tailwind UI's HTML for these and write vanilla JS for interactivity, but now I am rethinking, especially having read this quote in the article: "If we…

Look in to alpine.js - pairs very nicely with Tailwind

Re: Building React and Vue Support for Tailwind UI

#69

Post by nwienert »

5Qn8mNbc2FNCiVV wrote: post #19
ssijak wrote: post #4

Or just use something like Chakra UI, which is like Tailwind CSS but based on styled system and built with Typescript for React from the beginning and has a nice set of basic components. I even built something like Tailwind UI but for Chakra (link is in my bio if you want to check it out)

And then you have JSS, no restrictions to the available design tokens, no postcss plugin support and your "css bundle" increases since you don't reuse tokens but styles are generated. Those things alone are reason for never using Chakra for anything serious as these are actual reasons your product/saas/whatever is at a higher risk of failing. And that's just apart from the fact that the components are not allowing ea…

Check out SnackUI, which solves most of this with typed components.
Post reply on HN