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

251–260 of 367 posts

Re: Tailwind UI

#251

Post by misiti3780 »

mkarnicki wrote: post #233
misiti3780 wrote: post #229

These UIs look great! Does anyone have any great resources, examples, where one could learn CSS/SCSS to create stuff like this. I know CSS/SCSS enough to edit existing codebases and tweek, but I would not be able to create these from scratch. I would love to improve my design skills.

While not CSS courses directly, these resources should help you address what you're looking for. Tailwind related playlists on Adam Wathan's YouTube: https://www.youtube.com/channel/UCy1H38XrN7hi7wHSClfXPqQ/pla... And this publication (by same authors as Tailwind UI, that is Adam and Steve) https://refactoringui.com/book/ Enjoy!

thx

Re: Tailwind UI

#252

Post by legostormtroopr »

mike1o1 wrote: post #134
arcatek wrote: post #130

Earlier quoted context omitted.

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…

"text-sm" is just font-size and text-gray is a color code, so the order of the classes doesn't matter either. The biggest benefit of this over inline styles is that if I decide to change the color of "gray-700", since those colors come from a configuration, I only need to change it in my configuration. It takes some getting used to of the rules, but after a day or two I don't even need to think about what the class n…

> I decide to change the color of "gray-700", since those colors come from a configuration, I only need to change it in my configuration.

This sounds like a boldRedText pattern to me [1]. I get the idea of adding utility classes that inherit the base classes, but altering the definition of the "gray" class to be some other color feels wrong.

[1] http://thecodelesscode.com/case/95

Re: Tailwind UI

#253

Post by wyaeld »

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 would expect their market is the group of professionals for whom doing that is simply not worth the time.

When your job is delivering high quality UX and there are always more apps to build in the pipeline, having someone give you a library of useful components works.

I have licenses for probably 4-5 of these, and they've all saved many hours of time, and resulted in avoiding the cost of a dedicated designer.

Re: Tailwind UI

#254

Post by praveenperera »

sandGorgon wrote: post #53

so the problem is that this is priced too high. Its not about free, but the real pricing market now is themeforest. For example - http://landrick.react.themesbrand.com/ is 17$. https://g-axon.com/wieldy-ant-design-react-redux-admin-templ... is 24$ (which uses ant design)

I bought this the second the email hit my inbox. Overpriced is super subjective. I will bet that this launch does incredibly well.

Re: Tailwind UI

#255

Post by makeee »

misiti3780 wrote: post #226
makeee wrote: post #199

Earlier quoted context omitted.

For React Bootstrap there's http://divjoy.com

looks decent, have you used it? any opinions?

I should have mentioned that I created it.. so I'm a bit biased. You can see some opinions in our Show HN awhile back though: https://news.ycombinator.com/item?id=20688044

Re: Tailwind UI

#256

Post by iSnow »

jacobsenscott wrote: post #230
rado wrote: post #4

Earlier quoted context omitted.

Looks good and polished, but that landing page requires 165 KB of CSS, gzipped. That's, to put it lightly, ridiculous.

Congratulations on building your time machine. And welcome to 2020. 165kb is nothing these days and only takes a fraction of a second to download and processes even on a slow computer. You're going to find all kinds of other cool cool stuff you didn't have in the 90's. Did you know you can build and deploy an entire application without ever running a compiler or touching a physical machine now? We have REPLs were you…

>Congratulations on building your time machine. And welcome to 2020.

Please don't do that. You are using sarcasm to ridicule the guy you are responding to, and that's an unproductive way to argue.

It is also against HN comment guidelines (https://news.ycombinator.com/newsguidelines.html):

"Be kind. Don't be snarky. Comments should get more thoughtful and substantive, not less, as a topic gets more divisive. Have curious conversation; don't cross-examine.

...

Please respond to the strongest plausible interpretation of what someone says, not a weaker one that's easier to criticize. Assume good faith."

Re: Tailwind UI

#257

Post by dwild »

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…

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: gray;" and class="text-gray-500" is mostly that you get a more beautiful gray (they add a bit of blue in it).

I guess "text-sm" is also similar, with an hand picked size which appear nice on every device and can be considered "small text".

Re: Tailwind UI

#258

Post by dwild »

legostormtroopr wrote: post #252
mike1o1 wrote: post #134

Earlier quoted context omitted.

"text-sm" is just font-size and text-gray is a color code, so the order of the classes doesn't matter either. The biggest benefit of this over inline styles is that if I decide to change the color of "gray-700", since those colors come from a configuration, I only need to change it in my configuration. It takes some getting used to of the rules, but after a day or two I don't even need to think about what the class n…

> I decide to change the color of "gray-700", since those colors come from a configuration, I only need to change it in my configuration. This sounds like a boldRedText pattern to me [1]. I get the idea of adding utility classes that inherit the base classes, but altering the definition of the "gray" class to be some other color feels wrong. [1] http://thecodelesscode.com/case/95

gray-700 isn't really 70% gray though, it's a darker gray than gray-600 and a lighter gray than gray-800. It also contains a bit more blue in it, which is actually quite common to do with gray.

In reality I'm pretty sure that you wouldn't alter it directly either and that if you do, you would try to keep the 10 versions of it somewhat linear, or at least consistent with the use that you do of it. Theses colors are there for prototyping quickly yet still offering good looking result. Sure "color: gray" works, but look at the colors choices [1], it's much better than the default gray and offer more choice than lightgray, gray and darkgray without having to do math over #808080.

[1] https://tailwindcss.com/docs/customizing-colors/#default-col...

Re: Tailwind UI

#259

Post by markdown »

ronyfadel wrote: post #179

Stealing these components would be a very shitty thing to do, but I'm wondering as to how the authors can protect their CSS library from piracy? (esp. considering the 249$ asking price). Legal action? I'm considering open sourcing a software product I'm working on, but it could mean that I'll be bending over backwards to monetize it, as people can just run straight from source.

> Stealing these components would be a very shitty thing to do, but I'm wondering as to how the authors can protect their CSS library from piracy

I used to sell GPL licensed Joomla extensions and themes.

Short answer: you can't. Long answer: You just can't.

People who're going to pirate your work aren't your customers and weren't going to pay anyway.

Re: Tailwind UI

#260

Post by zupa-hu »

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…

I think the key difference is that you can't use conditionals in style attributes. For example responsive variants, hover, focus, etc.

`text-sm lg:text-lg` is something you simply can't do in style attributes.

`text-gray-700` or `color: var(--mycolor-gray);` is indeed not _that_ much different. (I'm using CSS variables here to achieve the same as Tailwind variables.)

Post reply on HN