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

261–270 of 367 posts

Re: Tailwind UI

#261

Post by Luc93 »

csande17 wrote: post #122
reaperducer wrote: post #115

Earlier quoted context omitted.

It's as if one person was arguing for hard-line separation of style and content, and another person was arguing that in-line is the way to go, and then Tailwind came along and said, "Why not both?" So now it's the worst of both worlds: an abstraction layer and dirty code.

I think it's a little more subtle than you're saying. When you use inline styles for everything, you're making the initial development a little faster by making future maintenance and changes a lot harder. (Like, if you decide headings should be italic instead of bold, that's a one-liner fix if you're using CSS properly, but if you're using inline styles you have to individually fix every heading on every page.) So m…

"[...] you have to individually fix every heading on every page."

You should have utilized a template engine in the first place. So you'd only have to change the layout/partial/component that is responsible for rendering the heading. Moreover, you could also have extracted the component with css by creating a .title class and using @apply.

Re: Tailwind UI

#263

Post by uyuioi »

AbdelilahLbardi wrote: post #223
irrationalactor wrote: post #222

I love Tailwind but hate having to deal with build tools and purgecss and package management and [insert modern workflow hassle] just for a little side project. Is there anything similar to Tailwind that doesn't require any build process?

You still can use the external CDN link. But you won't be able to do a custom configuration file which is completely okay.

I don’t recommend people use the CDN, it unpacks with a huge payload.

Re: Tailwind UI

#264

Post by jhardy54 »

dwild wrote: post #257
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…

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.

Re: Tailwind UI

#265

Post by dwild »

sergiotapia wrote: post #82
chrshawkes wrote: post #9

Earlier quoted context omitted.

I'm tired of excuses for inferior tooling. If you truly know CSS, Tailwind is a waste of time.

I'm kind of with you on this. We're rebuilding a large internal admin tool with all in house css and components, it's tiny and fast. We didnt want to bring in bootstrap or some other huge framework. Those were fine when I was a jr developer - not anymore

> We're rebuilding a large internal admin tool with all in house css and components,

Why would you have shared in-house css and components? Just write vanilla css right?

Tailwind is that shared in-house css and components for people/team that don't have shared in-house css and components. If you can afford to build one, sure use that!

This is made for prototyping too, this is to get to the MVP quicker. Again, if you have a shared in-house css and components library that does the same, sure use that instead, it makes much more sense!

> Those were fine when I was a jr developer - not anymore

That's a scary sentence. Why do you believe it matter whether you are junior or not to use that library? A library is made to avoid doing twice the works. If you already did that work, you don't need that library, that's for sure, but it's totally unrelated to your level as a developer.

Re: Tailwind UI

#266

Post by whelming_wave »

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.

For plain old `text-gray-500`, they're pretty similar. One advantage that Tailwind has is screen sizes - you might write `flex items-center justify-between mobile:flex-col` for a row that turns into a column on smaller screens where the UI becomes awkward, for example.

Re: Tailwind UI

#267

Post by tomtheelder »

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

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 to actually modify all of those to be new classes at once.

In fact, I think this scheme is a whole lot closer to what most developers actually want, which is to have composable classes that actually represent something semantic. "text-sm" is your small text. That should be consistent around your application. If you change what some of that looks like, you probably ought to be changing all of it. If you want a few elements to use a different text size, then go change the classes on those.

I really encourage you to try this out. I was somewhat skeptical, but it truly feels like a huge step forward. Going back to something like Bootstrap/Foundation or- God forbid- BEM feels incredibly painful to me now.

I also don't think separation-of-concerns is a reasonable goal. I read this article [1] after using tailwind for a while, and I agree with almost the entirety of it.

[1] https://adamwathan.me/css-utility-classes-and-separation-of-...

Re: Tailwind UI

#268

Post by Luc93 »

bensochar wrote: post #191
pcurve wrote: post #36

On the surface, the markup is pretty damn awful. But if you reach certain level of proficiency, this will definitely speed up development. Back End Developer Personally I would prefer Bootstrap over this approach.

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…

I'd imagine a reusable React component something like:

Are you sure?

Of course this solution would work in other templating engines as well.

The alternative would be extracting css components:

.alert { @apply px-4 py-3 ... }

.alert-danger { @apply bg-red-100 .. }

Re: Tailwind UI

#269

Post by pests »

mike1o1 wrote: post #248
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

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.

Re: Tailwind UI

#270

Post by GordonS »

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 don't think this is exactly comparable to a theme, but I do agree that it's priced too high.

Not only that, but I think the pricing model is wrong; lifetime access for a one-time fee is a big mistake (and one I previously made with a startup).

As a developer, I understand that you need a predictable, repeatable income stream to keep going - and if I'm going to invest in something like this, I want it to keep going. I'd far prefer to pay something like $49/y instead of a one-time $249 fee.

Post reply on HN