Tailwind: style your site without writing any CSS

Re:Tailwind: style your site without writing any CSS by androidgirl on Friday November 02, 2018 @10:23AM (#18363209)

I really like these atomic/functional css libraries with any sort of frontend framework or templating system that leverages components.

Personally, I have been using Tachyons with React for the past couple months, and it's been a blast. Compared to writing html templates with Emmet and css with Sass, I feel as if I am more productive and like I can reuse more components.

It's worth a try if it interests you!

[ Parent | on HN ]

Re:Tailwind: style your site without writing any CSS by chrisfrank on Friday November 02, 2018 @10:39AM (#18363324)

I've also found Tachyons & React to be an amazing combination. The only trouble I've had is extracting common CSS class strings into tweakable components, e.g. a <Button> whose background color you can easily override, or a <Header> with tweakable font weight.

I wrote a tiny (1kb) library to make this easier. For anyone working with React and functional CSS, I hope it's helpful:

https://www.npmjs.com/package/nanostyled

[ Parent | on HN ]

Re:Tailwind: style your site without writing any CSS by androidgirl on Friday November 02, 2018 @10:59AM (#18363478)

Seems like an interesting library! I also encountered this issue, but I ended up just passing in colors/borders/spacing as props. I will have to see how that holds up for complicated UIs.

[ Parent | on HN ]

Re:Tailwind: style your site without writing any CSS by chrisfrank on Friday November 02, 2018 @11:06AM (#18363537)

Thanks! I started by just passing props too, and I could see that approach working forever. I just got tired of having to always specify <Button bg="blue" border="ba1" />, when 90% of the buttons in the app were blue with a border.

[ Parent | on HN ]