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

321–330 of 367 posts

Re: Tailwind UI

#321

Post by cageface »

uk_programmer wrote: post #312
cageface wrote: post #281

Earlier quoted context omitted.

Sure in a 4 line example it's fine. On a real site with 5 different kinds of hero elements, with some styles in common but a lot of small variations and each with its own responsive behavior it's not so easy anymore. Coming up with good names for things is one of the hardest jobs in programming and this style forces you to name everything . I've been building sites the way you suggest for 20 years. I also had a negat…

> Coming up with good names for things is one of the hardest jobs in programming and this style forces you to name everything. People say that. If you build stuff in components like you are supposed to you almost always have a server side component or component logic that you will have to name . So you are going to have to start naming things properly somewhere. You are simply kicking the can down the road. > I've be…

People say that. If you build stuff in components like you are supposed to you almost always have a server side component or component logic that you will have to name. So you are going to have to start naming things properly somewhere.

Sure, so you can do it once and use functional css to define the styles that go with that component right alongside the markup instead of having to maintain another css class name for that component in a separate file, mostly likely with arbitrary and inconsistent padding and margin and font-size values.

Re: Tailwind UI

#322

Post by deltron3030 »

Vinnl wrote: post #316
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…

> Everyone goes through the initial shock of complaining about the "ugly markup", the violation of separation of concerns, etc. Hmm, that's not really my main concern. My main initial feeling is that it feels like just as much work as writing plain CSS? For comparison, I've been using Bulma for a lot of my projects so far, and given that many websites/web apps really don't have any special unique layout, it's covered…

>Is there a reason I might be interested in Tailwind still?

Bulma or Bootstrap are ok if you stick to the defaults, but it get's tricky if you work with different fonts, icons and graphics in general, where you often have to make small adjustments to align things.

Everything sits in their own little bounding box and might look off next to another element. Tailwind and other utility based systems with generous enough sizing scales make it easier to make those small adjustments.

Sure you could re-center icons from your icon libraries manually within a design tool and adapt their bounding boxes to fonts this way, but it's a time consuming task.

Re: Tailwind UI

#323

Post by SPBS »

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.

Re: Tailwind UI

#324

Post by uk_programmer »

pdr2020 wrote: post #320
uk_programmer wrote: post #312

Earlier quoted context omitted.

> Coming up with good names for things is one of the hardest jobs in programming and this style forces you to name everything. People say that. If you build stuff in components like you are supposed to you almost always have a server side component or component logic that you will have to name . So you are going to have to start naming things properly somewhere. You are simply kicking the can down the road. > I've be…

That markup is almost unreadable for you . And despite your crude last jibe at web developers attracted to Tailwind's model, most competent web developers will be able to quite easily pickup this very sane CSS utility framework :)

>And despite your crude last jibe at web developers attracted to Tailwind's model,

No my jibe was at web developers in general. CSS and HTML are quite simple really. If you actually keep things semantic and build your document properly with appropriate markup ... lo and behold things just work properly.

I can understand the divistush of the past when CSS 1 and 2 were quite limited. However today there is simply no excuse.

> most competent web developers will be able to quite easily pickup this very sane CSS utility framework :)

Sure I can read it. The problem is with things like this is that you are learning how to work with their model that basically doesn't work like CSS is supposed to work.

So you it essentially nullifies your existing skillset and forces you into using their framework. I bothered to actually learn CSS properly and understand the technology and then I have to work with something which basically throws that all out the window and forces me to work how they want me to build stuff. No thanks.

If you think that is a "sane" way of working, I really don't know what to say.

Re: Tailwind UI

#325

Post by uk_programmer »

cageface wrote: post #321
uk_programmer wrote: post #312

Earlier quoted context omitted.

> Coming up with good names for things is one of the hardest jobs in programming and this style forces you to name everything. People say that. If you build stuff in components like you are supposed to you almost always have a server side component or component logic that you will have to name . So you are going to have to start naming things properly somewhere. You are simply kicking the can down the road. > I've be…

People say that. If you build stuff in components like you are supposed to you almost always have a server side component or component logic that you will have to name. So you are going to have to start naming things properly somewhere. Sure, so you can do it once and use functional css to define the styles that go with that component right alongside the markup instead of having to maintain another css class name for…

If you actually think ahead i.e. don't just start coding straight away you can avoid that. All you are doing is making excuses for not doing your job properly.

Re: Tailwind UI

#326

Post by cageface »

uk_programmer wrote: post #325
cageface wrote: post #321

Earlier quoted context omitted.

People say that. If you build stuff in components like you are supposed to you almost always have a server side component or component logic that you will have to name. So you are going to have to start naming things properly somewhere. Sure, so you can do it once and use functional css to define the styles that go with that component right alongside the markup instead of having to maintain another css class name for…

If you actually think ahead i.e. don't just start coding straight away you can avoid that. All you are doing is making excuses for not doing your job properly.

You really sound like someone that's never worked on big projects with changing requirements or a big development team.

Re: Tailwind UI

#327

Post by deltron3030 »

uk_programmer wrote: post #194
deltron3030 wrote: post #171

Earlier quoted context omitted.

You could also describe it with a comment , and/or deduce the structure from the actual html elment order.

You could however the problem is that the comment will invariably will be left after thing have changed and will just cause confusion. Generally what the code is doing should be fairly obvious and should not need comments. Comments should be reserved where things aren't obvious. I don't think it is a good idea to create code where it isnt obvious what it does. CSS is relatively simple tbh things really shouldn't be c…

It might not work in very large teams without an agreed on working style, but I don't see how it would be a problem in smaller teams or for individuals agreeing on using comments to their advantage.

Re: Tailwind UI

#328

Post by uk_programmer »

cageface wrote: post #326
uk_programmer wrote: post #325

Earlier quoted context omitted.

If you actually think ahead i.e. don't just start coding straight away you can avoid that. All you are doing is making excuses for not doing your job properly.

You really sound like someone that's never worked on big projects with changing requirements or a big development team.

Well you would be wrong then.

Re: Tailwind UI

#329

Post by dharma1 »

Without commenting on Tailwind CSS itself, I think the value add here is with the very nice looking UI components designed by Steve Schoger.

I would like to see a React component version of this, ready to use with a CMS like https://webiny.com

Re: Tailwind UI

#330

Post by meigwilym »

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

I completely agree with you.

My approach is to use class names, and in a custom stylesheet use tailwind's @apply function, so

.page-section { @apply bg-white rounded shadow overflow-hidden max-w-lg; }

Post reply on HN