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

21–30 of 81 posts

Re: Show HN: Tailwind Template Directory

#21

Post by nprateem »

smatija wrote: post #16
Crazyontap wrote: post #2

I really was hoping that tailwind was a fad which died but like everything JavaScript it's here to stay sadly I recently found myself staring at a button element with more classes than I have ever seen like Click me! . It’s like the eccentric artist who insists on using every color in the palette. After been forced to use it for almost 2 years I still don't see the point. Your HTML files? Bloated. Your sanity? Questi…

Agreed, I find tailwind defaults sensible, but it tends to make templates quite unreadable. My compromise with it is just using @apply in css files: styles.css: .button { @apply px-2 py-1 rounded-sm shadow-md hover:shadow-lg font-bold cursor-pointer block; height: 32px; } .button.create { @apply bg-green-700 text-white; } template.html: ...

Ah the dream. Only now it takes my django project 45s to rebuild the tailwind any time I change those styles (and I only have about 30).

Re: Show HN: Tailwind Template Directory

#22

Post by nprateem »

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.

Give 60% to someone else

Re: Show HN: Tailwind Template Directory

#23

Post by superice »

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, CSS variables. Defining a preset of variables on :root for sizes and color ranges goes a long way.

The design philosophies behind Tailwind are sound, but like so many I dislike the technical implementation. I feel like there is a lot of halo effect happening with Tailwind where judgement of technical merits is influenced by judgement on visual merits.

Re: Show HN: Tailwind Template Directory

#24

Post by geekodour »

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.

Re: Show HN: Tailwind Template Directory

#25

Post by nprateem »

simonbarker87 wrote: post #7
Crazyontap wrote: post #2

I really was hoping that tailwind was a fad which died but like everything JavaScript it's here to stay sadly I recently found myself staring at a button element with more classes than I have ever seen like Click me! . It’s like the eccentric artist who insists on using every color in the palette. After been forced to use it for almost 2 years I still don't see the point. Your HTML files? Bloated. Your sanity? Questi…

So that’s a mid blue button that gets slightly darker on hover, with bold white text, it’s got a little more horizontal padding than vertical padding and has slight corner rounding and a slight drop shadow. And I can see all of that in context where the button is declared rather than having to go look at another file and see what everything is. Oh and I know that none of those TW classes conflict or over write any pr…

Good luck changing the style site-wide.

Re: Show HN: Tailwind Template Directory

#26

Post by lobsterthief »

klabb3 wrote: post #11
Crazyontap wrote: post #2

I really was hoping that tailwind was a fad which died but like everything JavaScript it's here to stay sadly I recently found myself staring at a button element with more classes than I have ever seen like Click me! . It’s like the eccentric artist who insists on using every color in the palette. After been forced to use it for almost 2 years I still don't see the point. Your HTML files? Bloated. Your sanity? Questi…

> 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 codebase implemented properly.

I’ve been writing CSS for 25 years and have gone through just about everything at this point—inline/attribute styles, CSS, SCSS/SASS, LESS, stylus, Bourbon, Tailwind, Bootstrap, Ant, Semantic UI, MUI, etc. And tbh, MUI is the closest I think we’ve gotten towards rapid iteration while solving specificity issues, the problem of selector generation, proper a11y and state styling (e.g. button focus styling), and inconsistency issues, but again—only when architectured correctly.

Re: Show HN: Tailwind Template Directory

#27

Post by progx »

Crazyontap wrote: post #2

I really was hoping that tailwind was a fad which died but like everything JavaScript it's here to stay sadly I recently found myself staring at a button element with more classes than I have ever seen like Click me! . It’s like the eccentric artist who insists on using every color in the palette. After been forced to use it for almost 2 years I still don't see the point. Your HTML files? Bloated. Your sanity? Questi…

Some time ago i thought the same, but using it a while change my mind. You can create and edit quick things, especially if some elements should have another styling. I don't miss the times when you specify every elements styling, especially nested components where you have to be carefull.

Whether web-app or website, nobody create them in 2024 from scratch without any tools. And these tools can render your HTML with minimal classnames and optimize you css-file with needed tailwind styles.

Primary i use it in web-app, and i don't care about dozens of classnames. The tools optimize it.

Re: Show HN: Tailwind Template Directory

#28

Post by progx »

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…

But MUI is nothing else then all the CSS-Frameworks before, only that you like the syntax more.

Re: Show HN: Tailwind Template Directory

#29

Post by hennell »

nprateem wrote: post #25
simonbarker87 wrote: post #7

Earlier quoted context omitted.

So that’s a mid blue button that gets slightly darker on hover, with bold white text, it’s got a little more horizontal padding than vertical padding and has slight corner rounding and a slight drop shadow. And I can see all of that in context where the button is declared rather than having to go look at another file and see what everything is. Oh and I know that none of those TW classes conflict or over write any pr…

Good luck changing the style site-wide.

Go into the button component change the style.

Re: Show HN: Tailwind Template Directory

#30

Post by progx »

nprateem wrote: post #25
simonbarker87 wrote: post #7

Earlier quoted context omitted.

So that’s a mid blue button that gets slightly darker on hover, with bold white text, it’s got a little more horizontal padding than vertical padding and has slight corner rounding and a slight drop shadow. And I can see all of that in context where the button is declared rather than having to go look at another file and see what everything is. Oh and I know that none of those TW classes conflict or over write any pr…

Good luck changing the style site-wide.

For this case you use components. He talks about styling one component, that should look differn.
Post reply on HN