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

241–250 of 367 posts

Re: Tailwind UI

#241

Post by AngeloAnolin »

hising wrote: post #27
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…

Tabler is Based on Bootstrap, right? https://github.com/tabler/tabler

It says so on its Github page[0]

abler is free and open-source HTML Dashboard UI Kit built on Bootstrap

[0] https://github.com/tabler/tabler

Re: Tailwind UI

#242

Post by dcre »

newfeatureok wrote: post #71

The problem with this IMO is that some enterprising person will just use regular tailwind (or another utility-css framework like tachyons) and re-implement all of these components and give it out for free, circumventing the license and killing the value of this. Normally with themes it would be time prohibitive to do so, but the nature of utility-css is that it's relatively straightforward to implement each component…

I think you're underestimating

a) how hard it is to make a library like this that's any good

b) people will want to support them anyway

$249 (or $599 for a team license) one time is really very little if it does what it promises.

Re: Tailwind UI

#243

Post by markdown »

Why is the license on another website... and a website built for collaboratively editing a document no less?

Best to set it in stone (by bringing it onto your own website) before you start selling.

Re: Tailwind UI

#244

Post by 6510 »

stanmancan wrote: post #213
mike1o1 wrote: post #166

Earlier quoted context omitted.

No, "gray-700" doesn't mean it's 70% gray. The term "700" is just referring to a color on a scale. I don't even need to name it "700", I can name it "dark" or whatever I want (which is what previous versions of Tailwind used). i.e. "text-gray-dark", or "text-gray-700", would have a class with a single css property: color: #4A5568; By default Tailwind comes with a default color palette with hand picked colors. They we…

The numbering name system makes it really easy to make incremental changes too. I can’t manually edit a hex to my liking, but I can easily change text-blue-500 to text-blue-600 if I want it a bit darker.

#000000 is black

#FFFFFF is white

They are 3 sets of 2 hex numbers.

#FF0000 is red

#00FF00 is green

#0000FF is blue

(you hear of RGB, Red Green Blue, in that order)

Now if you want a darker color (closer to black) you lower FF to a lower value. A darker blue would for example be #0000AA

if you want a lighter color you increase the other 2 color values. A lighter blue would be #2222FF

If you don't like hex there is rgb(0,0,255) which does exactly the same.

There is also rgba(0,0,255,0-1) with an alpha channel.

You can also put any part of that in a css variable and use it where you like.

body{--foo: 0,0,255,0.5; bar:0,0,100 }

p {background: rgba(var(--foo)) }

div {background: rgba(var(--bar), 0.8) }

Re: Tailwind UI

#245

Post by csande17 »

dpacmittal wrote: post #215
csande17 wrote: post #128

Earlier quoted context omitted.

> You're not supposed to do it like this for your own project. If even the creator of Tailwind doesn't use Tailwind properly, does anyone?

They are using it properly. It's just that they're using a single css file across all the examples and component pages.

I don't think that's it. Open https://tailwindui.com/css/app.css and Control-F for "placeholder-" -- are there really examples and component pages on this website that set the input placeholder text color to every single different color in the color palette, at every responsive breakpoint?

Re: Tailwind UI

#246

Post by tomc1985 »

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

Re: Tailwind UI

#248

Post by mike1o1 »

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

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 have more context around when and how that particular section of a component should be displayed, so I have more context about what I should name the class (i.e. "card-subtitle").

I feel like the documentation explains it fairly well if you're interested in reading more about it:

https://tailwindcss.com/docs/extracting-components#extractin...

Re: Tailwind UI

#249

Post by Agoreddah »

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.

Re: Tailwind UI

#250

Post by mike1o1 »

6510 wrote: post #244
stanmancan wrote: post #213

Earlier quoted context omitted.

The numbering name system makes it really easy to make incremental changes too. I can’t manually edit a hex to my liking, but I can easily change text-blue-500 to text-blue-600 if I want it a bit darker.

#000000 is black #FFFFFF is white They are 3 sets of 2 hex numbers. #FF0000 is red #00FF00 is green #0000FF is blue (you hear of RGB, Red Green Blue, in that order) Now if you want a darker color (closer to black) you lower FF to a lower value. A darker blue would for example be #0000AA if you want a lighter color you increase the other 2 color values. A lighter blue would be #2222FF If you don't like hex there is rg…

Sure, but the colors from Tailwind aren't determined through an algorithm like this. They are handpicked from a designer, which I feel like most design systems do as well.
Post reply on HN