3 ms·
I love Tailwind! It elegantly solves most pain points in writing CSS. However, it does this at the cost of readability, and you can easily end up with HTML that
by yasserkaddour 5y ago
I love Tailwind! It elegantly solves most pain points in writing CSS. However, it does this at the cost of readability, and you can easily end up with HTML that looks like this:
<div class="w-16 h-16 px-2 py-1 m-1 text-sm text-white bg-black rounded md:w-32 md:h-32 md:rounded-md md:text-base lg:w-48 lg:h-48 lg:rounded-lg lg:text-lg focus:bg-red-400 focus:rounded-md hover:bg-yellow-200 hover:rounded-t-md md:focus:rounded-xl md:focus:text-lg lg:focus:rounded-xl lg:focus:text-xl md:hover:rounded-xl lg:hover:rounded-xl">Yikes!</div>
I would love to have a transpiler that produces the line above from a code like this:
<div
class="w-16 h-16 px-2 py-1 m-1 text-sm text-white bg-black rounded"
md="w-32 h-32 rounded-md text-base hover:rounded-xl"
md-focus="rounded-xl text-lg"
lg="w-48 h-48 rounded-lg text-lg hover:rounded-xl"
lg-focus="rounded-xl text-xl"
focus="bg-red-400 rounded-md"
hover="bg-yellow-200 rounded-t-md">Yeah!</div>
- hbbio 5y agohttps://windicss.org/ https://windicss.org/ does it It also seems that the major speed improvement in Tailwind is inspired by windi
- yasserkaddour 5y agoI looked into windicss before and didn't see the attributify mode https://windicss.org/features/attributify.html https://windicss.org/features/attributify.html It's exactly what I was looking for, Thanks!
- pdxandi 5y agoOh wow, that's pretty handy. I hadn't seen that before, either.
- cush 5y agoEven spread out in attributes it’s hard to read
- happytiger 5y agoI moved to tailwind a month ago and it’s become incredibly easy to read and work with very quickly. It’s one of those frameworks that just clicks when people start using it, though I think a lot of people don’t feel that way until they put the time in to get familiar.
- yasserkaddour 5y agoExactly! My example fit a just seven lines colocated with your HTML, in CSS you would need to read a full page in a different file.
- 65 5y agoWhat about a helper function for that? Something like this: const md = styles => styles.split(' ').map(style => 'md:' + style).join(' ') Then const styles = [ 'w-16 h-16 px-2 py-1 m-1 text-sm text-white bg-black rounded', md('w-32 h-32 rounded-md text-base hover:rounded-xl') ].join(' '); Then <div className={styles}>Hello</div> I haven't actually tried this approach but it might clean some things up.