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

91–100 of 122 posts

Re: Building React and Vue Support for Tailwind UI

#91

Post by monkey_monkey »

nailer wrote: post #83
mike1o1 wrote: 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…

so thinking of names like ‘author-nickname’ is difficult but learning an entire new syntax for css is easy?

Yes, "learning" the tailwind syntax was really quite easy.

In addition, most editors and IDE's now have plugins for autocompletion

And as an incentive to learning – once you're familiar with Tailwind's syntax, you get to use that learning on all your future Tailwind projects.

Re: Building React and Vue Support for Tailwind UI

#92

Post by richeyryan »

seer wrote: post #79
brundolf wrote: post #5

> We crawl this document as an AST, and actually transform it into four formats...The key to getting sensible output is really just having total control of the input format. It's still hard work, but when you can encode the intent of each example into a custom input format, converting that to another format turns out so much better than trying to write something that can convert arbitrary jQuery to React or something…

So true. The thing that put me on the path of discovering parsers was a tweet that said something to the effect of “if you want any relatively complex regex, what you actually need is a recursive descent parser”. Now as a self thought dev I haven’t really been shown in school what those were and always thought of them as some wizardly magic that only compiler writers dabble in. But after that tweet I looked around an…

I once worked on a product where the idea was the end user would write a lot of custom regexes to parse the output of commands on network devices. The system was written in such a way that the regexes were nested and looped depending on the depth of the output. The overall result is you could read and update config on a device based on what output of these regexes.

It seemed bizarre to me that it was considered an appropriate solution. The end users were network engineers so they were _able_ to write the regexes but it seemed obvious to me that providing the user with a higher level parsing library would be much easier. It was something I wanted to POC but never found time in the end.

Re: Building React and Vue Support for Tailwind UI

#93

Post by [deleted] »

city41 wrote: post #32
nailer wrote: 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…

Tailwind out of the box is a simple, canned design system. The Tailwind authors have already decided your color palette, spacings, animations, etc. This is perfectly fine for prototypes or anything that isn't that important. But if you want to have more ownership over the design system, it's better to use Tailwind's config and set it up as it makes sense for your site. Colors are the most obvious candidates, with Tai…

[deleted]

Re: Building React and Vue Support for Tailwind UI

#94

Post by lampe3 »

welder wrote: 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.

Re: Building React and Vue Support for Tailwind UI

#95

Post by Vinnl »

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 just learned about it for the first time in this post, but it sounds like that's what they're trying to do with Headless UI?

Re: Building React and Vue Support for Tailwind UI

#96

Post by ereveles »

sbacic wrote: post #86

Honestly, the only two things missing in Tailwind for me are: 1. @apply as a JS function that I can use in CSS in JS. 2. Some way to override existing Tailwind classes with new ones (ex: Generic Button => Specialized Button => Unique Button).

Not sure if this would work for you for 1, but I love using Tailwind with https://github.com/ben-rogerson/twin.macro

Re: Building React and Vue Support for Tailwind UI

#97

Post by Vinnl »

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)

That would negate some of the reasons for using Tailwind in the first place, like the flexibility to make a design be specific to your use case despite the guard rails of the basic constraints (Styled System provides this on its own) combined with very simple tooling with no runtime overhead.

Re: Building React and Vue Support for Tailwind UI

#98

Post by idkwhoiam »

dmt0 wrote: post #71
mike1o1 wrote: 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…

"Shoot, was this p-4 or p-6 on the other page?"

Checkmate!

Re: Building React and Vue Support for Tailwind UI

#99

Post by brianzelip »

What an effing great article. Not only for the clarity and care behind the writing, but also for useful links like [0].

Adam's (author) podcast Full Stack Radio is useful like this too [1].

[0] https://www.w3.org/TR/wai-aria-practices/examples/menu-butto...

[1] https://fullstackradio.com/

Re: Building React and Vue Support for Tailwind UI

#100

Post by janjones »

brianzelip wrote: post #99

What an effing great article. Not only for the clarity and care behind the writing, but also for useful links like [0]. Adam's (author) podcast Full Stack Radio is useful like this too [1]. [0] https://www.w3.org/TR/wai-aria-practices/examples/menu-butto... [1] https://fullstackradio.com/

Indexing your references from zero. Cool, haven't seen that before :D
Post reply on HN