Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Tailwind: style your site without writing any CSS

jvns.ca

Post reply on HN
Print view View original

171–180 of 185 posts

Re: Tailwind: style your site without writing any CSS

#171

Post by jacamat »

adamwathan wrote: post #130
jacamat wrote: post #106

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 wors…

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

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

Re: Tailwind: style your site without writing any CSS

#172

Post by nojvek »

chrisweekly wrote: post #150
armandososa wrote: post #140

This is not for me. I am very good at, and very comfortable writing CSS since I've been doing it since the CSS Zen Garden days. But I understand the pains this is trying to solve and I think that this is the wrong approach and also the wrong abstraction. - If you don't like CSS, this will not help you write less CSS, it will only make you write it inline and using a weird syntax. - If you want to do the sensible thin…

Tailwind and CSS-in-JS are not mutually exclusive! On the contrary, they're a terrific match!

Not really CSS in js is basically applying styles directly to an element, this one declares a small style sheet upfront and classes on elements are looked up to get style information.

Css in js is very efficient if you don’t need any css inheritance. Tailwind is just inefficient for the browser to do all those lookups to resolve the final style bag.

I’m not sure why I would ever use tailwind. It’s yet another archaic syntax I have to keep in my head.

Re: Tailwind: style your site without writing any CSS

#173

Post by chrisweekly »

nojvek wrote: post #172
chrisweekly wrote: post #150

Earlier quoted context omitted.

Tailwind and CSS-in-JS are not mutually exclusive! On the contrary, they're a terrific match!

Not really CSS in js is basically applying styles directly to an element, this one declares a small style sheet upfront and classes on elements are looked up to get style information. Css in js is very efficient if you don’t need any css inheritance. Tailwind is just inefficient for the browser to do all those lookups to resolve the final style bag. I’m not sure why I would ever use tailwind. It’s yet another archaic…

Sorry, but, respectfully, you misunderstand tailwind in the context of css-in-js. This post might make a better case than I have time to right now: https://github.com/jlengstorf/gatsby-tailwind-demo

Re: Tailwind: style your site without writing any CSS

#177

Post by adamwathan »

jacamat wrote: post #106

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 wors…

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?

Re: Tailwind: style your site without writing any CSS

#178

Post by mst »

jacamat wrote: post #164
mst wrote: post #156

Earlier quoted context omitted.

> Now that we build with small, immutable, scoped components, its trivial to drop in a new component (or remove it) from anywhere without affecting anything else. Any suggestions for further reading on "small, immutable, scoped components" ? I'm half sure I know what you mean and entirely sure I don't understand it well enough to explain it to somebody else. (thanks for your already expansive reply)

There’s no magic. Remember that at the end of the day, no matter what approach you take to your CSS, we are all dealing in trade offs. I like to say, that with components, you encounter “a new level of bugs.” With Functional CSS, you deal mostly with incidental bugs. “This container has margin 10 and this one has 15!” or “This text-red is overriding all my text!” Individually, these are annoying, but together they ca…

I followed far enough, I think, and will look at the airbnb site for more.

Much appreciated!

Re: Tailwind: style your site without writing any CSS

#179

Post by necolas »

adamwathan wrote: post #177
jacamat wrote: post #106

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 wors…

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

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.

Re: Tailwind: style your site without writing any CSS

#180

Post by necolas »

necolas wrote: post #179
adamwathan wrote: post #177

Earlier quoted context omitted.

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

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.

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