Tailwind: style your site without writing any CSS

Re:Tailwind: style your site without writing any CSS by jacamat on Friday November 02, 2018 @12:26PM (#18364307)

Everytime I see Tailwind/Tachyons/Functional CSS at the top of HN I die a little inside. I've said it before and I'll say it again: if you actually like this kind of CSS, you probably don't work on large websites. And when you do, the reason people hate it so much will become abundantly clear to you.

Functional CSS makes for an unscaleable, inconsistent, unmaintainable dumpster fire of styles that is objectively worse than just writing regular CSS.

<sarcasm> But it's convenient, right? So who cares! AirBnB, Facebook, Walmart, Github, and Twitter are all probably wrong anyway. </sarcasm>

[ Parent | on HN ]

Re:Tailwind: style your site without writing any CSS by adamwathan on Friday November 02, 2018 @01:40PM (#18365036)

GitHub has been switching to functional CSS over the last couple of years: https://primer.style/

I interviewed Diana Mounter who leads their design systems team about this a while back: http://www.fullstackradio.com/75

[ Parent | on HN ]

Re:Tailwind: style your site without writing any CSS by jacamat on Friday November 02, 2018 @08:09PM (#18367774)

I'll definitely respond to this more later. ;)

[ Parent | on HN ]

Re:Tailwind: style your site without writing any CSS by adamwathan on Saturday November 03, 2018 @12:32PM (#18371040)

These are the CSSStats.com stats for the companies you mentioned:

Airbnb (332kb, 54 text colors, 72 background colors, 48 font sizes): https://cssstats.com/stats?url=http%3A%2F%2Fairbnb.com&ua=Br...

Walmart (178kb, 32 text colors, 22 background colors, 64 font sizes): https://cssstats.com/stats?url=http%3A%2F%2Fwalmart.com&ua=B...

Twitter (630kb, 36 text colors, 50 background colors, 46 font sizes): https://cssstats.com/stats?url=http%3A%2F%2Ftwitter.com&name...

GitHub (658kb, 157 text colors, 141 background colors, 55 font sizes): https://cssstats.com/stats?url=http%3A%2F%2Fgithub.com&name=...

These are not stylesheets I want to emulate. As I mentioned in my other reply, GitHub is actively moving towards a more utility-based approach to solve this problem.

Compare this to a fairly large app where the CSS and markup were completely rewritten using Tailwind by a friend of mine recently:

https://cssstats.com/stats?link=https%3A%2F%2Fapp.churchsoci...

41kb (8.1kb gzipped), 15 text colors, 44 background colors, 22 font sizes. Pretty good, no?

[ Parent | on HN ]

Re:Tailwind: style your site without writing any CSS by necolas on Saturday November 03, 2018 @11:13PM (#18373946)

Twitter PWA (30 KB, 11 colors, 32 bg colors, 15 font sizes): https://cssstats.com/stats?link=https%3A%2F%2Fgist.githubuse...

This is all the CSS needed to render almost the entire app from mobile to desktop widths, in both light and night themes. The "utility CSS" is generated by a framework and not something engineers have to be concerned with when writing components.

[ Parent | on HN ]

Re:Tailwind: style your site without writing any CSS by necolas on Sunday November 04, 2018 @01:17AM (#18374382)

Updated link https://cssstats.com/stats?link=https%3A%2F%2Fgist.githubuse...

[ Parent | on HN ]

Re:Tailwind: style your site without writing any CSS by syropian on Friday November 02, 2018 @01:41PM (#18365038)

Small snippet pulled right from the GitHub dashboard source code - https://d.pr/i/j99Y4C

Check your facts ;)

[ Parent | on HN ]

Re:Tailwind: style your site without writing any CSS by Isofarro on Friday November 02, 2018 @02:29PM (#18365449)

Atomic CSS was used on Yahoo sites, since the Marissa Meyer level. Apparently on a few of their properties. Hard to assess whether it was a failure or not. Considering their websites were a negative asset, I doubt the use of Atomic CSS was a major component of that, there were definitely bigger problems.

[ Parent | on HN ]

Re:Tailwind: style your site without writing any CSS by Giorgi on Friday November 02, 2018 @12:59PM (#18364670)

I have hard time understanding what are you talking about? github and twitter have their own framework, what's bad with that? why would not it scale?

[ Parent | on HN ]