Live data from Hacker News

Building React and Vue Support for Tailwind UI

blog.tailwindcss.com

101–110 of 122 posts

Re: Building React and Vue Support for Tailwind UI

#101
post #62
post #41

Earlier quoted context omitted.

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?

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

Because "p-4.25" isn't an available class.

The whole point is that you have a fixed list of sensible options. You can extend it and customise it, but out of the box your design system is sensible and predictable. "p-8" is double "p-4"; "p-6" is half way between. It's like an enum case vs just using a raw integer.

Sure you can replicate it by creating some Sass variables and sticking to them but then you're on your way to re-implementing a utility-first framework.

Re: Building React and Vue Support for Tailwind UI

#102
post #94
post #23

This is so ugly and error prone: How do you remember the names of all your classes? Should your IDE know about these classes? Can you autocomplete class names? Where's the import statement for these classes so you know where they're defined and what they do. There's a better way: Use site-wide themes (Objects with keys like colors.heading.primary having value '#000') and withStyles[1] and React.PureComponent[2]. Havi…

I'm with you here. Tailwind is easy to start but hard to maintain and extend. Its good for a prototype or small landing page. I would never use it for long term project where you need to maintain and extend your features a lot.

[deleted]

Re: Building React and Vue Support for Tailwind UI

#103
post #29
post #25

Earlier quoted context omitted.

Love this. And anything else that uses design systems rather than styling individual elements. I currently have a tailwind project that's around twelve months old. I'd like to add a dark theme. Normally - in a CSS, SCSS, PostCSS project - this would consist of adding a media query overriding a handful of color variables. Using tailwind (which has 'inbuilt dark mode support') I have a few thousand colors spread around…

Yep, design systems (your own component library) are the way to go with React. Auto-complete, type checking support, functional, etc. You do style the component once, but after that it's self-contained, reusable, and functional. Everyone stopped using unstructured cryptic class="bg-gray-100" for good reason. Tailwind is backwards progress.

https://wptavern.com/state-of-css-2020-survey-results-tailwi...

Clearly, not "everyone" stopped doing that.

Re: Building React and Vue Support for Tailwind UI

#104
post #28

Earlier quoted context omitted.

You don't need to remember all the classes. Instead, you can go to https://tailwindcss.com/docs and search for whatever you're looking for. Having IDE autocompletion (or even TypeScript integration) would be really nice. I'm sure there's plugins for many IDEs or editors that can do that, though.

VS Code and IntelliJ plugins provide just that, and the VS Code plugin goes further by showing the CSS it will expand to and show a color preview next to the class name.

So does the IntelliJ one, with a hover I think

Re: Building React and Vue Support for Tailwind UI

#105
post #53

Earlier quoted context omitted.

Bootstrap and the like don’t have one property per class name as Tailwind does.

The bootstrap comparison is awful as they both do COMPLETELY different things

I agree Bootstrap and Tailwind are very different, that’s what I was pointing out. Your problem is with tomc1985, not me.

Re: Building React and Vue Support for Tailwind UI

#106

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…

> Imagine just pulling in GenericUI and sprinkling in your CSS of choice

That's exactly what the tailwind people built in Headless UI: "a library of JS components that abstract away all of the keyboard navigation and accessibility logic without including any design opinions"

Re: Building React and Vue Support for Tailwind UI

#107
post #89

Earlier quoted context omitted.

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

Thanks - Alpine.js looks like an appropriate choice in general, but unfortunately it’s not supported by these particular components. However, the announcement does say “we're looking forward to exploring other frameworks in the future (Alpine.js is next on our list)”. I’d be interested to know whether Alpine.js support is “coming soon” or “maybe eventually”.

They're already generating hacky alpine to power their interactive examples, so I'd guess soonish.

Re: Building React and Vue Support for Tailwind UI

#109

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…

> Imagine just pulling in GenericUI and sprinkling in your CSS of choice That's exactly what the tailwind people built in Headless UI: "a library of JS components that abstract away all of the keyboard navigation and accessibility logic without including any design opinions"

I guess what I'm arguing is that we already have so many Headless UIs out there. Another comment pointed out PrimeVue, which does exactly what Headless UI does. This feels like another library reinventing the wheel.

I'm always reminded of https://xkcd.com/927/ when another UI framework pops up. Do all libraries do things just differently enough to warrant a completely new library or can the implementation details be abstracted to some core lib (maybe even a web spec).

On the other hand, maybe I'm wrong and HeadlessUI ends up being that GenericUI lib.

Re: Building React and Vue Support for Tailwind UI

#110
post #88

Earlier quoted context omitted.

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

There is an ongoing effort at https://open-ui.org/ to add these basic primatives. I'm throwing my effort behind the replacement and we welcome input from everyone. If I can avoid writing another autocomplete and solving the Esc corner cases, the effort will have been worthwhile...

Thanks for bringing this up. I didn't know about open-ui. I think something like this is becoming more and more necessary.
Post reply on HN