Tailwind UI • Hacker News Board

Re: Tailwind UI

#351

Post by Scarbutt » Thu, Feb 27, 2020, 3:29 PM UTC

SPBS wrote: post #323

luketheobscure wrote: post #295

Tailwind is fantastic. Everyone goes through the initial shock of complaining about the "ugly markup", the violation of separation of concerns, etc. But I've worked in enough large codebases to tell you that the ones that use Tailwind have a more consistent UI, with much less handwritten CSS. Bootstrap sites inevitably devolve into a soup of custom CSS and Bootstrap framework. You end up with lots of verbose class de…

Did the Tailwind projects use the @apply directive, or just plain Tailwind classes all the way? Asking because I wonder how Tailwind deals with project wide style changes. With traditional CSS you just update the class in one location, with functional CSS you have to hunt down every location where the class was used.

You create components and reuse them.

Re: Tailwind UI

#352

Post by jaf656s » Thu, Feb 27, 2020, 4:23 PM UTC

stefanfisk wrote: post #309

jaf656s wrote: post #168

Earlier quoted context omitted.

I have been using tailwind on a new project and I only see 3 real benefits over using inline css styles: 1) Sizes are standardized in a predetermined set of discrete size classes. So you start to think about sizes, padding, margins, etc in terms of steps instead of values. You can change the steps in one place and they apply globally. It's a little easier to standardize a rough style guide compared to starting from s…

I big benefit is that Tailwind supports media queries, while inline styles can't help you at all there.

oh yeah, I forgot about media queries. Which is impossible inline, but also adds to the verbosity

Re: Tailwind UI

#353

Post by aschismatic » Thu, Feb 27, 2020, 5:02 PM UTC

mike1o1 wrote: post #125

Tailwind has been great and I've been looking forward to this for months. I fought Tailwind as a concept pretty hard at first, but after hearing Adam and a few others raving about it I gave it a shot. It takes some getting used to at first but I can't imagine developing without it anymore. To me, the biggest benefit of Tailwind and utility classes in general is that it removes the cognitive overheard of having to thi…

I first took a look at Tailwind CSS a year ago and liked it. However, when I started using its flexbox classes I noticed it was missing one for align-content: space-between (or space-evenly, I can't recall precisely). Thankfully it looks as though those utility classes have since been added [0], however, at the time it made me hesitant to adopt Tailwind because it made me wonder how many other basic property-value pairs were not yet implemented as classes. Maybe that's a stupid reason to have given up on it, but it's just how I felt at that point in time. Do you feel Tailwind has mostly improved with since you started using it?

[0] https://tailwindcss.com/docs/align-content

Re: Tailwind UI

#354

Post by williamdclt » Thu, Feb 27, 2020, 5:27 PM UTC

htunnicliff wrote: post #286

williamdclt wrote: post #283

I really like Tailwind's approach in some cases, it does make prototyping extremely fast. What I'm really missing (and I don't understand it doesn't exist) is a way to compose classes into a single class, to refactor collections of small utility classes into a meaningful class with semantic sense. Why can't I do something like: .my-class { use .text-sm use .text-gray use .bold } Kind of like calling several functions…

If you take advantage of PostCSS or Tailwind's CLI, you can compose something like: .my-class { @apply text-sm; @apply text-gray; @apply font-bold; }

This is exactly what I want, down to the syntax!

Re: Tailwind UI

#355

Post by psoots » Thu, Feb 27, 2020, 5:58 PM UTC

This is not a good idea.

1. Components are sort of antithetical to the Tailwind CSS ethos of atomic styling. Of course, examples of markup and class arrangements are certainly helpful, but at the end of the day you are still always going to have a unique markup in the end. And according to their license, those customized components are now under their Tailwind UI license.

2. What counts as a component? What if Tailwind UI produces a licensed component that is a single div with a single border class? Could it be that someone with no prior knowledge or access to this component have accidentally already created the same markup elsewhere? Would that be an infringement?

Frankly, I really enjoy using Tailwind CSS, but I'm a little nervous now to even use the original project in my work.

Re: Tailwind UI

#356

Post by yurishimo » Thu, Feb 27, 2020, 8:59 PM UTC

nnain wrote: post #346

luketheobscure wrote: post #295

Tailwind is fantastic. Everyone goes through the initial shock of complaining about the "ugly markup", the violation of separation of concerns, etc. But I've worked in enough large codebases to tell you that the ones that use Tailwind have a more consistent UI, with much less handwritten CSS. Bootstrap sites inevitably devolve into a soup of custom CSS and Bootstrap framework. You end up with lots of verbose class de…

Hey, is any of you Tailwind UI websites public? Would love to see it!

It just came out. Nobody is using it in prod yet.

Re: Tailwind UI

#357

Post by danzig13 » Thu, Feb 27, 2020, 11:30 PM UTC

iCarrot wrote: post #313

mike1o1 wrote: post #274

Earlier quoted context omitted.

Because I don't want that cognitive overhead of even thinking about what the selector should be. Then what if I have another sub-sub text? Do I make that an h3? An h4? I don't want to have to think about that. I just make it "text-xs" and move on. I don't even need to move over to my css file at all - I stay within my template and stay within my flow. It seems crazy and counter-intuitive at first, but I find that it…

Something to consider: semantic HTML helps with accessibility.

Have to agree. Having to think about the selector makes you think about the structure and make things more semantic.

I have been paralyzed by trying to do things the semantic way before too though. And now no one cares according the markup I venture to look at now and then.

Re: Tailwind UI

#358

Post by amree » Fri, Feb 28, 2020, 12:38 AM UTC

mkarnicki wrote: post #238

bensochar wrote: post #191

Earlier quoted context omitted.

Another reason Bootstrap > Tailwind is consistency & context. Adding the class `alert alert-danger` to a div tells my coworkers that it's an "alert" & it will look like an alert everywhere. If I want to change how alerts look, I change the CSS With Tailwind you'd have `bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative`. Then I'd have to change my HTML everywhere to update the appearance of aler…

> Then I'd have to change my HTML everywhere Nope. Once you see same (sub)set of classes repeated, you would instead define .alert and .alert-danger using Tailwind's @apply directive, and you now have a single place to change how your `alert alert-danger` looks :)

Isn't that like recreating bootstrap component again? It's just that this time it's not created by default at first

Re: Tailwind UI

#359

Post by aagha » Fri, Feb 28, 2020, 1:38 AM UTC

Wow. I just watched the video Adam put together of slamming a new front-end together and it's really impressive (and fast).

Re: Tailwind UI

#360

Post by mirap » Fri, Feb 28, 2020, 9:30 AM UTC

UX designer here! Tailwind is great piece of work and I'd recommend it for validating MVPs and building new projects in general.

Reasons:

- Its constrains and whitespaces are well made, if kept untouched, the result may be good, even if build by dev with no design skills.

- Elements are containing what's necessary, but no more. No unnecessary tooltips etc.

- All elements have clear basic states (see https://tailwindui.com/components/application-ui/forms/input...)