Hacker News Reader

Comment by recursivedoubts | Hacker News Reader

You could check out the client side templates extension:

https://htmx.org/extensions/client-side-templates/

This is great, I am definitely considering using this for some of my side projects so I don't spend hours with JS just to display some JSON output as HTML.

Add tailwind css or another utility class css framework and you can do the whole frontend in html :)

Yes, but you shouldn't use it as a simple drop-in. The minified version via CDN is like 1.7 MB ... at least they mention you should not use it in the docs and instead configure it to your needs.

tailwind is 1.7MB of CSS? ....whyy?

id imagine that you get a lot of rules when you have a whole bunch of different "margin-top-<x>". the idea is probably to rely on some CSS tree-shaking/"dead CSS elimination" tool to only keep the ones you need

exactly

It defines css classes for most css properties. Their website [1] explains why you might want that pretty well. Regarding file size, the idea is that you use something like PurgeCSS in your build pipeline, which removes all unused css classes. A bit like tree shaking for css.

[1] https://tailwind.css

https://tailwindcss.com is the link :D

Additionally so you can open up the developer tools, and just slap on classes on divs and experiment a bit quicker.

Towards the end you can put it all together and trim it down, not sure if there's tooling that auto joins some of the CSS as necessary though.

Indeed, using tailwind without some build pipeline is not recommended. You'd use something like PurgeCSS to remove all unused css classes. Which admittedly kind of defeats the whole idea of keeping it simple.

FYI you seem to have misspelled template on that page:

  can use one of three attributes named <template-engine>-temlpate (e.g. mustache-template)

Thanks! This is what I need.

Reply on news.ycombinator.com