Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: Tailwind Template Directory

tailkits.com

Post reply on HN
Print view View original

71–80 of 81 posts

Re: Show HN: Tailwind Template Directory

#71

Post by dimava »

hu3 wrote: post #12
blorenz wrote: post #6

Earlier quoted context omitted.

Every time something with tailwind is posted there is always a rehash of this response. I believe most of this frustration comes from using tailwind in the raw. There are a few essential libraries available that amplify the power of tailwind by magnitudes: tailwind-merge for last-specified wins, and class-variance-authority to reduce your class declarations in coherent reusable variants. Tailwind empowers the express…

Interesting response. I'm in this war against build steps. Is there a way to 80/20 Tailwind without the build steps? I mean, get 80% of the benefits with 20% of the work.

You may use CDN build of UnoCSS (16k GH stars) https://unocss.dev/integrations/runtime which generates styles on the fly for 80% of benefits with 0% build steps (even with regular HTML)

It does have quirks compared to build variant, so if you use a framework, using it in a build step may be better, it'll still be much lighter then tailwind

Re: Show HN: Tailwind Template Directory

#72

Post by klabb3 »

lobsterthief wrote: post #26
klabb3 wrote: post #11

Earlier quoted context omitted.

> And those cryptic class names? They’re as cryptic as ls, cat, pwd. They have well defined semantics, sensible default, and tooling that can warn if your properties are conflicting. In fact, with regular css you need to target elements by coming up with arbitrary class names, like .banner-main-content. Those are more cryptic imo, and completely arbitrary. (Naming things is problem #2, remember) Do I wish there was a…

Have you used MUI before? No need for utility classes, no need for writing custom selectors, everything ties back to the theme, and everything is consistent. I don’t believe that “80-95% of the time utility classes are better” when super popular alternatives like MUI exist. Tailwind introduces some solutions while introducing other problems. It has its place when used correctly, but I’ve never seen a single TW codeba…

> Have you used MUI before?

No, React-specific? Keep in mind Tailwind is not bound to a specific component engine and works fantastic in e.g. Svelte which I'm using.

That said, it looks good I guess? But I fail to see what's so unique. Tailwind is just a lower level preprocessor that can be used with unstyled components (which is definitely not unique - there's lots of traction outside the React ecosystem as well..) From what I can see, it looks like MUI also has a utility class type of approach, or is it baseUI?

In either case, my point is that plain CSS with class selectors is not great, and that very often it makes more sense to bundle markup and styles. Well-thought-out interactions between the component- and style/theming systems is also an important part, and Tailwind clearly plays well with different component systems in the ecosystem. Other than that I don't have any interest in dying on some Tailwind-specific hill. I'm happy to see it improve or be superseded, should that be necessary.

> Tailwind [...] has its place when used correctly, but I’ve never seen a single TW codebase implemented properly.

Yes but ironically that's not necessarily a bad thing. That's the expected result of tech that is flexible enough to let you do what you need, including painting yourself into a corner. The most common mistake in framework design I've seen is "one to rule them all" - where you have to play according to restrictive rules within, or suffer greatly to break out. Tailwind is a la carte, incremental, and plays nice with other paradigms, which isn't to be underestimated.

Re: Show HN: Tailwind Template Directory

#73

Post by langcss »

geekodour wrote: post #24

I have been using 3.5 sonnet to generate me tailwind components it does a pretty good job, and then with clsx, tailwind-merge and tailwind-variants things become pretty maintainable. I reach-out to shadcn-svelte when I need components which would take some extra tuning.

Nice tip. I might trial adding 3.5 sonnet as an option to https://langcss.com.

Re: Show HN: Tailwind Template Directory

#74

Post by jacobyoder »

naught0 wrote: post #64
jacobyoder wrote: post #13

Earlier quoted context omitted.

It's adequate for some folks who work in the same codebase, and define their own style of work. It's been a real pain for me who comes in to various codebases for short periods of time and have to read/digest/learn every single project's unique take on buttons. class="btn btn-primary" is also pretty easy to read. But in the last couple weeks I've have to deal with both class="bg-blue-500 hover:bg-blue-600 text-white…

> without having to scan through dozens of your components looking for a pattern Wouldn't you have to scan disparately located CSS files anyway? How many projects have you seen with nonsensical or clobbered classnames or conflicting rules? Really for a lot of designs I think you can just eyeball it. If `px-4` looks about right, then use it. Otherwise you can find a similar component and hijack the exact padding if yo…

Again, at least part of the core issues I have is coming in to other projects where each person thinks in a 'different way'. And almost all of them are simply copy/pasting loads of tailwind extended strings of stuff, then semi randomly tweaking until something looks 'ok', then moving on.

> scan disparately located CSS files anyway

usually, I encounter CSS in one of two ways:

1. a main base css file or set of files (from a framework, maybe), and then an override css file. Single override file can get hairy to look through, admittedly, but it's typically in one spot. I rarely come across projects with dozens of standalone css files.

2. 'style-in-components' - primarily in vue, because vue sfc encourages scoped styling - structure, code, style in a single file. Whether that's bootstrap styling ('btn btn-primary', etc) or tailwind doesn't make too much of a difference.

Where I've hit more maintenance issues is coming in to projects with tailwind in say, react or vue - with the 'style in components' - is that "text-xs px-1 rounded-sm bg-gray-200 inline-block text-gray-600 mb-1" repeated across multiple components, is harder to find when I want to replicate something vs just "class='tooltip'"

Of course, we're all doing it wrong, and if we all just 'think different' all the time, and spend loads of time rewriting "wrong" stuff from other people - things will be just fine. But the world I live in, and the world I see a lot of people in - is not greenfield, but brownfield, and we have to live with the decisions others made. Tailwind does not make my life any easier that way, and generally introduces more cognitive overhead earlier in a project when it comes to visual stuff.

Re: Show HN: Tailwind Template Directory

#75

Post by codegeek »

oDot wrote: post #10

A lot of Tailwind's value comes not from the utility classes, but from the design system they enforce on the user, which is the most valued feature Tailwind offers, in my opinion.

Exactly. Bootstrap always had Utility Classes but they lost to Tailwind due to the focus on design and great examples/templates that Tailwind team focussed on early on and then the market took over.

Re: Show HN: Tailwind Template Directory

#76

Post by mkrahul »

langcss wrote: post #73
geekodour wrote: post #24

I have been using 3.5 sonnet to generate me tailwind components it does a pretty good job, and then with clsx, tailwind-merge and tailwind-variants things become pretty maintainable. I reach-out to shadcn-svelte when I need components which would take some extra tuning.

Nice tip. I might trial adding 3.5 sonnet as an option to https://langcss.com .

This comment got downvoted because of link. I'm a slient reader for years, this account was registered days ago and not related to langcss. Langcss is a good product allow users generate UI with words. I should stand out and speak for good project and show my support.

Re: Show HN: Tailwind Template Directory

#77

Post by meiraleal »

hu3 wrote: post #12
blorenz wrote: post #6

Earlier quoted context omitted.

Every time something with tailwind is posted there is always a rehash of this response. I believe most of this frustration comes from using tailwind in the raw. There are a few essential libraries available that amplify the power of tailwind by magnitudes: tailwind-merge for last-specified wins, and class-variance-authority to reduce your class declarations in coherent reusable variants. Tailwind empowers the express…

Interesting response. I'm in this war against build steps. Is there a way to 80/20 Tailwind without the build steps? I mean, get 80% of the benefits with 20% of the work.

Yes: https://unocss.dev/

You can even use it directly in runtime https://unocss.dev/integrations/runtime

Re: Show HN: Tailwind Template Directory

#78

Post by dabber »

lobsterthief wrote: post #17
orangepanda wrote: post #14

Earlier quoted context omitted.

I strongly disagree on the maintainability. Mistakes are easy to make and have been made when comparing a list of 20 class names across a dozen elements. Its only "maintainable" if you ignore the class list when reading. I review my local evangelists' tailwind code and from their mistakes its clear they're not reading the class list. It reminds me of how some people claim they're great at multitasking and can text &…

I’ve experienced the exact same thing. Most TW evangelists I know are admittedly not that great at CSS. Those who are generally prefer a library like MUI instead, which offers the same maintainability benefits, a far more consistent UI, but with a higher learning curve.

I'd love to love MUI, but in my experience: MUI + React + Typescript just moves the toil of doing anything away from the style concerns and makes it a purely Typescript puzzle.

Re: Show HN: Tailwind Template Directory

#80

Post by yucelfaruksahan »

mittermayr wrote: post #54

Aside from the Tailwind discussion: The site advertises FREE templates, I select a FREE template, but when I want to use it, I STILL have to pay. Huh? https://tailwindtemplates.co/templates/basic

It appears the template owner updated the pricing after we launched the page. I have now updated the pricing tag.Sorry for the confusion.
Post reply on HN