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

Tailwind UI

tailwindui.com

Post reply on HN
Print view View original

271–280 of 367 posts

Re: Tailwind UI

#271

Post by matthijs_ »

nickjj wrote: post #21
atonse wrote: post #5

It's really nice, but is there something this pretty for bootstrap? I literally manage something like 10 different products/websites. And the only way to stay sane and have some pace with features is to use bootstrap for all of them (we currently use bootstrap for maybe 5 of them, and the rest were inherited sites that we're migrating). I love the look of this but don't have the time or the will to migrate all our si…

> It's really nice, but is there something this pretty for bootstrap? I've always liked the Bootstrap 4 CodeBase theme ($28): https://demo.pixelcave.com/codebase/be_pages_dashboard.php It's not the same exact look of course, but it has dozens of pages, widgets and components that look clean. It's all well formed code too with ES6 JS, Webpack, etc..

Take a look at the extended license, which you'll be needing in many cases. $999 vs $28, for a single site license. No thank you.

Re: Tailwind UI

#272

Post by toastercat »

Agoreddah wrote: post #249
toastercat wrote: post #74

For everyone is who skeptical about utility-first "atomic" or "functional" CSS, and don't want to go through the hassle of getting Tailwind with necessary build steps set up, I'd recommend giving a smaller-scoped library such as Basscss a try. It's >3kb, you can include it using a CDN link, and it covers most of what you need to be productive. https://basscss.com/

Wow, just today I was creating css lib for my project with similar naming and behaviour rules. Thanks for showing it out, I will check (eventually create) sass version of it. In my personal opinion, for simple projects, this is all what developer needs. Intuitive, extensible, low dependency and fast.

Yes, I agree. I use basscss for a ton of small projects, and my personal sites. It's so small, it's trivial to include even when I'm using larger frameworks like Bootstrap.

Re: Tailwind UI

#273

Post by ivanhoe »

tomtheelder wrote: post #267
tomc1985 wrote: post #246

Earlier quoted context omitted.

How is that any different from setting CSS in the style attribute of your tag? What happens when you need to update all the "text-sm text-gray-700" to something else? Seems like a step backwards at worst and identical to Bootstrap/Foundation at best. Everyone provides class primitives like that What you're describing offends separation-of-concerns

It's different because it's not actually setting a specific style, it's still a semantic description. You would never need to update all the "text-sm text-gray-700" in your project to something else, that just wouldn't make any sense. You might change what "text-sm" and "text-gray-700" (I'd probably go with a more meaningful name for colors, "text-gray-primary" or whatever, but hey) actually do, but you wouldn't want…

Classic question is what happens if you decide to change all gray text with the blue one? Do you end up having the class named text-gray that is setting text to blue, or you search & replace class names...

Re: Tailwind UI

#274

Post by mike1o1 »

pests wrote: post #269
mike1o1 wrote: post #248

Earlier quoted context omitted.

Typically the "text-sm text-gray-700" would be a one-off styling while I'm developing a page or a component, not necessarily something that will be repeated a hundred times. If it turns out that later down the line I realize that "every card should have that size and color for the card title", then I'll pull it out to a separate class or part of a partial or something like that. The idea being at that point then I ha…

My question is why you cant just name the card and then use selectors to style the title or any other internal styling? This removes the need to name at all. It can just be .card > h2 or whatever and there you would do your font-weight and color.

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 makes me a lot more productive.

Re: Tailwind UI

#275

Post by ivanhoe »

So Tailwind is basically a Bootstrap without the hard-coded default styles, and then you add the UI theme like this. Do you then just end up with a different looking Bootstrap, or it still has some other benefits?

Re: Tailwind UI

#276

Post by nickjj »

matthijs_ wrote: post #271
nickjj wrote: post #21

Earlier quoted context omitted.

> It's really nice, but is there something this pretty for bootstrap? I've always liked the Bootstrap 4 CodeBase theme ($28): https://demo.pixelcave.com/codebase/be_pages_dashboard.php It's not the same exact look of course, but it has dozens of pages, widgets and components that look clean. It's all well formed code too with ES6 JS, Webpack, etc..

Take a look at the extended license, which you'll be needing in many cases. $999 vs $28, for a single site license. No thank you.

> Take a look at the extended license, which you'll be needing in many cases. $999 vs $28, for a single site license. No thank you.

I don't think the license is worded very well. If you read it as "end user" being a visitor of your site then pretty much every theme on themeforest would cost $999 but that's not the case.

I think what the license means is if you're bundling the theme in with a product you plan to sell and distribute then you need an extended license, unless it happens to be for freelance work in which case a regular ($28) license is fine (the "note to freelancers" clause handles that). If you have a free or paid SAAS app or something like then you can use a regular license too because you're not distributing the theme as a paid product.

I've talked to the author of the theme directly and mentioned using it for a course platform I'm building (end users of the site would be paying for individual courses). He didn't mention needing an extended license for that. He even went as far as giving me permission to release the course platform as open source with his theme included[0].

[0]: What I wrote isn't official for saying you can do the same. I recommend contacting the author directly if you have intent to do that.

Re: Tailwind UI

#277

Post by graydsl »

tomc1985 wrote: post #246
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…

How is that any different from setting CSS in the style attribute of your tag? What happens when you need to update all the "text-sm text-gray-700" to something else? Seems like a step backwards at worst and identical to Bootstrap/Foundation at best. Everyone provides class primitives like that What you're describing offends separation-of-concerns

Tailwind user here. :)

One of the biggest benefits in my opinion is, to communicate the different utility classes to your UI/UX person. By restricting him/her to discrete values for margin, padding, colors, etc. they will not go overboard with there designs and also make the handoff way easier. If you use zeplin for example you can for example define color names in the sketch file and zeplin will show them in their UI. You just click on a text and see "ahh she used text-gray-500".

Much less friction in the workflow.

As for the concerns about messy markup mentioned in some other reply. True that can happen sometimes, but if you use React or Vue, you can encapsulate a lot in components. The markup in the components high up in the tree will look basically the same. And the leaf components should be quite small anyways.

Another really nice benefit to the old way is that you don't have to worry about breaking stuff. When you change bg-gray-200 to bg-gray-300 you can be sure that it only affects the element you have in front of you.

But in the end I think people have to try it out to be able to judge Tailwind.

Re: Tailwind UI

#278

Post by mike1o1 »

jhardy54 wrote: post #264
dwild wrote: post #257

Earlier quoted context omitted.

Someone else mentioned this and as I'm not a Tailwind user either, it made me understood a bit more the principle. text-gray-700 is not a font-weight, it's a color predetermined by the framework. They aren't generated, they are hand picked by a designer. Each addition of 100 is a bit darker. https://tailwindcss.com/docs/customizing-colors/#default-col... So essentially, what's the difference between style="color: gra…

In that case, isn't that basically style="color: var(--gray-500);" with extra steps? I love to see people experiment for the sake of experimentation, but I'd be hesitant to adopt Tailwind as an engineer unless I understood why they weren't just CSS variables.

They are variables in that they're specified in your Tailwind configuration file, which is what generates the utility classes that are generated. If you really wanted to you, you can extract it out as a variable if you wanted to use that color elsewhere, such as part of a box-shadow or background color or something like that.

  .custom-bg-color {
    background-color: theme('colors.gray.500');
  }

Re: Tailwind UI

#279

Post by graydsl »

ivanhoe wrote: post #273
tomtheelder wrote: post #267

Earlier quoted context omitted.

It's different because it's not actually setting a specific style, it's still a semantic description. You would never need to update all the "text-sm text-gray-700" in your project to something else, that just wouldn't make any sense. You might change what "text-sm" and "text-gray-700" (I'd probably go with a more meaningful name for colors, "text-gray-primary" or whatever, but hey) actually do, but you wouldn't want…

Classic question is what happens if you decide to change all gray text with the blue one? Do you end up having the class named text-gray that is setting text to blue, or you search & replace class names...

IMHO search & replace would be the way to go here. Otherwise no one will understand it later on.

But you could also define a color called text-primary, if you are concerned that something like this would happen.

Re: Tailwind UI

#280

Post by cageface »

arcatek wrote: post #130
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…

Disclaimer: I haven't used Tailwind. Maybe I'm missing something. > For example, if I'm working on a card and I want some text below the main text to have a smaller, gray font size. What do I name that class? "card-sub-text", "card-sub-title"? No - don't even worry about it - "text-sm text-gray-700" and move on. What's the difference with "color: gray; font-weight: 700"? In this case I really don't have to care about…

Tailwind also gives you responsive prefixes so if you need different padding on mobile vs desktop it's easy to just use a lg:p-4, for example. You can't do this inline styles.
Post reply on HN