News for hackers. Stuff that matters.

A comment on Htmx and Web Components: A Perfect Match. Parent comment

Re:Htmx and Web Components: A Perfect Match by andirk on Wednesday January 17, 2024 @11:48PM (#39037985)
The whole "name it what its purpose is rather than what it does" like "alert-danger" rather than "giant-red-text" seems to have been thrown out with a lot of Tailwind. It prefers chaos but chaos is so much easier to adjust outliers. Those 2 divs have double the spacing between them? Just take the mx-5 off of one! It's hideous but so easy. Constant find/replace all.
[ Parent | on HN ]
Re:Htmx and Web Components: A Perfect Match by quickthrower2 on Thursday January 18, 2024 @12:05AM (#39038104)
flex and gap-5 are king
[ Parent | on HN ]
Re:Htmx and Web Components: A Perfect Match by andirk on Thursday January 18, 2024 @12:44AM (#39038354)
Yes! A few of the many, many, many CSS definitions to get us where `<table>` got us in 1996. See ya later colspan, rowspan.
[ Parent | on HN ]
Re:Htmx and Web Components: A Perfect Match by LudwigNagasena on Thursday January 18, 2024 @01:03AM (#39038475)
You can add your `alert-danger` and whatever you need in `tailwind.config.js` or even directly in your root css file using CSS variables.
[ Parent | on HN ]
Re:Htmx and Web Components: A Perfect Match by _heimdall on Thursday January 18, 2024 @09:42AM (#39042204)
I've tried building design systems into Tailwind config a few times and found it to lose a lot of the potential value of tailwind.

Markup is no longer portable without bringing the config with it and devs still need to learn the custom styles and classes we defined, meaning Tailwind knowledge alone doesn't get you up to speed right away.

[ Parent | on HN ]
Re:Htmx and Web Components: A Perfect Match by gedy on Thursday January 18, 2024 @01:26AM (#39038615)
To your example, recent Bootstrap has a mix of component and utility classes that lets you do both "alert-danger mx-0" or whatever.

I also avoids the giant size of Tailwind classes that requires that elaborate build/reduction process. You can just include Bootstrap from a CDN or whatever.

[ Parent | on HN ]
Re:Htmx and Web Components: A Perfect Match by arcanemachiner on Thursday January 18, 2024 @03:11AM (#39039252)
There's also daisyUI, which is sort of like Tailwind + Bootstrap: component-based, but made with Tailwind. Cuts down on the tag soup pretty nicely.
[ Parent | on HN ]
Re:Htmx and Web Components: A Perfect Match by gedy on Thursday January 18, 2024 @09:25AM (#39041995)
Yes DaisyUI is nice. Ironically, it convinced us not to move from Bootstrap, because we realized its components were almost 1:1 with Bootstrap. And that we actually don't want the infinite styling options that Tailwind offers, so that devs mostly use design system components. At that point, who cares where/what the CSS is?
[ Parent | on HN ]