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

171–180 of 367 posts

Re: Tailwind UI

#171

Post by deltron3030 »

uk_programmer wrote: post #81
cageface wrote: post #61

Earlier quoted context omitted.

In my experience trying to do semantic CSS just adds a lot of extra cognitive overhead and breaks down in the inevitable requirements churn every project goes through. I was skeptical of Tailwind too until I actually tried it. It’s one of those things like JSX that defies received wisdom but in real use is very nice.

> In my experience trying to do semantic CSS just adds a lot of extra cognitive overhead. Do people really struggle with this? Heading Tagline It far more straight forward just to call something what it is and you can actually read the CSS afterwards.

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

Re: Tailwind UI

#172

Post by [deleted] »

mattferderer wrote: post #97
have_faith wrote: post #68

Earlier quoted context omitted.

It seems to require so much CSS knowledge that you might as well just use regular class names and write the CSS components yourself as it requires you to understand how flexbox etc works anyway to use it's utility classes properly.

You're right. Don't use Tailwind if you don't know CSS well. The use case is for creating Template Components with something like React, Vue, Hugo, Razor or another component template framework. Tailwind offers a large list of customizable variables to use to help keep your CSS consistent. You're still pretty much writing CSS though, just with shortcuts. I consider it Emmet CSS + Variables. I also highly suggest usin…

[deleted]

Re: Tailwind UI

#173

Post by mike1o1 »

squeaky-clean wrote: post #169
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…

(Also not a Tailwind user) I guess the common response to this is that well chosen semantic names usually help later down the line after these kinds of changes happen, especially with devs coming in and out. I've actually come across C code that had "#define ONE_THOUSAND_TWENTY_FOUR 4096" because that was the audio buffer size and later had to be increased to 4096 but the macro name was never changed. AUDIO_BUFFER_SI…

If I wanted to change all links from gray to blue/underlined, the best practice there would probably be to use a different utility class (text-blue-500 and underline) and update my templates/partials/whatever.

I think for your specific example, I would use the `@apply` directive to apply certain utilities to all links.

I've used Tailwind on large, complex apps with around 50 screens (so far), and using extracted components or partials hasn't been a problem at all with keeping things in sync.

``` a { @apply text-gray-700; }

// now becomes a { @apply text-blue-500 underline; } ```

The documentation goes over this pretty well, I think.

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

Re: Tailwind UI

#174

Post by jasim »

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…

> On a side note, if some bored person out there wants to make a huge splash in the CSS community, figuring out a way to target a specific DOM element, create the equivalent of an AST and specify a "dictionary", which would be a utility-css framework (tailwind, tachyons, basecss, etc) and finally reimplement the targeted DOM element in the chosen framework would be amazing.

This is quite doable for us at Protoship (we've built both a design-to-Tailwind CSS+HTML converter as well as a webpage-to-Sketch Chrome extension). It is a very appealing idea - to be able to recast any webpage into a Utility CSS framework, but I'm curious to hear about situations where it would've been useful in commercial work.

Re: Tailwind UI

#175

Post by city41 »

reaperducer wrote: post #126
city41 wrote: post #121

Earlier quoted context omitted.

Tailwind isn’t the first to take the utility class approach. Atomic CSS was an early implementation of the idea: http://acss.io

It doesn't have to be first to be bad. They can both be bad.

It's not necessarily bad. There are pros and cons to all css approaches. Atomic classes definitely have their fans. It's more a question of which pros and cons matter to you.

Re: Tailwind UI

#176

Post by nicpottier »

have_faith wrote: post #65
rjknight wrote: post #41

Earlier quoted context omitted.

I find that the verbosity is annoying at first, but it makes it incredibly easy to come back to some old HTML and work out exactly what it's doing, and why. Even with Bootstrap, you need to maintain a mental model of what the classes are doing and how they compose, and each custom class adds more complexity to that mental model. Yes, Tailwind has lots of classes, but each class does one thing , so reasoning about the…

> Tailwind has lots of classes, but each class does one thing I think this masks a lot of complexity that you have to manage when taking on this approach. And it's not because the approach is good or bad, more what it is or isn't suited for. The example on the homepage is very slickly presented, but the end result markup is extremely verbose. If I have a Card component, I would like to update them all at once when ne…

I had a similar recoil to this approach and then I tried it, and I think they are actually onto something.

Yes, you may have more than one card in your system, but in all likelihood you aren't repeating the HTML for that card more than once, rather you have it in a template of some kind which is called. So while you may have more than one card on your site, you probably don't have the template for it defined more than once. (at least ideally you don't)

For those cases where you do want to extract that code, Tailwind makes that easy to do.

Tailwind is a weird thing and like I said I really thought it was insane at first. But after rewriting a site in it in a few days I have to say it is better than the standard semantic CSS by a mile.

Re: Tailwind UI

#177

Post by z3t4 »

Just give me an image or sketch plus color palette and I will vectorize everything in hand written HTML and SVG, use semantic element (avoid using div and span), make it "responsive" for different screen sizes... and I would pay good money for it. If you are a designer, dont sell the code.

Re: Tailwind UI

#178

Post by _4ziu »

alharith wrote: post #137
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…

> 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. No because I believe that for every enterprising person wanting to circumvent paying for software, there are that many people who want to support the entre…

Capitalism is about making profit. There will be people who feel nice and want to buy this, but it's really not a reliable business model.

Re: Tailwind UI

#179

Post by ronyfadel »

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.

Re: Tailwind UI

#180

Post by gyrgtyn »

Joeri wrote: post #136
csande17 wrote: post #122

Earlier quoted context omitted.

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…

But can you realistically change the design centrally of something built only with utility css classes? If the class of an element doesn’t specify its semantics you cannot properly target it in a redesign without updating the markup.

I've never succeeded in that with semantic css either
Post reply on HN