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.
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?