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

131–140 of 185 posts

Re: Tailwind: style your site without writing any CSS

#131

Post by syropian »

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…

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

Check your facts ;)

Re: Tailwind: style your site without writing any CSS

#132

Post by wesleytodd »

jacamat wrote: post #108
shubhamjain wrote: post #74

How would have React adoption looked like if it wasn't backed by a tech giant? React propounds a very controversial idea: to put HTML inside Javascript. Of course, once you get the hang of it, it all makes perfect sense: tight coupling and composability. Tailwind, along the same lines, proposes a contrarian idea and it will only make sense once you start working with it. Here's what I have seen happen frequently: As…

The benefits absolutely do not outweigh the cons. For starters, your CSS can never compile down to a smaller size than component CSS - ever. Because of the nature of compositional classes the plateau of problems expands out almost infinitely, and the resultant inconsistencies necessitate new overrides, more code, more complexity, more misdirection. What size site do you work on? How often do you have to completely ch…

Preach

Re: Tailwind: style your site without writing any CSS

#134

Post by jonathanreinink »

jacamat wrote: post #108
shubhamjain wrote: post #74

How would have React adoption looked like if it wasn't backed by a tech giant? React propounds a very controversial idea: to put HTML inside Javascript. Of course, once you get the hang of it, it all makes perfect sense: tight coupling and composability. Tailwind, along the same lines, proposes a contrarian idea and it will only make sense once you start working with it. Here's what I have seen happen frequently: As…

The benefits absolutely do not outweigh the cons. For starters, your CSS can never compile down to a smaller size than component CSS - ever. Because of the nature of compositional classes the plateau of problems expands out almost infinitely, and the resultant inconsistencies necessitate new overrides, more code, more complexity, more misdirection. What size site do you work on? How often do you have to completely ch…

Co-author of Tailwind CSS here. Prior to building Tailwind, I followed more traditional approaches to writing CSS, like BEM. In fact, I remember when BEM first came out, and people hated it too. I've worked on small projects, and very large projects. I recently rebuilt a large web app using Tailwind, and my resulting CSS was TINY. I use Tailwind in conjunction with Purge CSS. The resulting filesize was 8.1kb gzipped (42kb).

> Tailwind and the frameworks like it are absolutely terrible at scale.

My experience has been the opposite. BEM is terrible at scale. You write the CSS, but then never dare change it, because you have no idea of the consequences of those changes. Developers end up duplicating BEM components for their use case, because it's safe. Which just leads to more CSS code. It's also worth noting that we're seeing more and more large companies move to utility based CSS, including GitHub and Heroku.

Re: Tailwind: style your site without writing any CSS

#135

Post by jaydid »

peeters wrote: post #128
err4nt wrote: post #105

Earlier quoted context omitted.

What's wrong with class="centered wide-margins light-bg"? It would do the same as what your .resources class looks like it might do, and it's supported everywhere already.

Nothing when everything's a one-off and you only have one supported theme. But if CSS is your component model (e.g. a card is always just a div but with a special style) then you'll have "centered wide-margins light-bg dropshadow" on every one of those divs, rather than just class="card". Similarly if you want to have two different themes with the same DOM, you can't do so easily.

Nobody who uses Tailwind would suggest copying the same classes over and over again in the example you’re talking about. You would either still create a card component (Tailwind does have the concept of components), or if you were using a framework like Laravel you could create a card blade component that held the tailwind card classes in one place.

Re: Tailwind: style your site without writing any CSS

#136

Post by RyanShook »

jmhnilbog wrote: post #124

What percentage of software churn is based on developers being reluctant to call out mistakes by other developers on their own teams/in their own companies (while having no problems calling out flaws in internet strangers' code)? 'Curating' what developers are allowed to do has been the focus of the last few jobs I've declined. "The guys at the other office are too dumb to learn (React|Angular|CSS|tech X). Obviously,…

Not sure it totally applies to this situation but agree and think this is a great point. Technology doesn't solve cultural problems and often exacerbates them!

Re: Tailwind: style your site without writing any CSS

#138

Post by adamwathan »

Tade0 wrote: post #47

Most (all?) of the classes apply exactly 1 line of CSS. I see this as an anti-pattern, because to me it looks like inline styles with extra steps. The only thing it avoids is accidental strong specificity. The reason we have CSS is that it's really easy to make HTML unreadable - after all it's essentially a 1D medium(lines of text) trying to describe a 2D space.

(Author of Tailwind here)

The difference is that inline styles can't use several important CSS features, like media queries or pseudo-classes like `:hover`, `:focus`, etc.

You have to first be convinced that inline styles are not inherently an anti-pattern to understand a framework like Tailwind. After that, the benefit of Tailwind is that it's like inline styles, except with the ability to style elements in different states and at different screen sizes.

I wrote a post a while back that is my best effort at arguing for the validity of presentational class names if you're interested: https://adamwathan.me/css-utility-classes-and-separation-of-...

Re: Tailwind: style your site without writing any CSS

#139

Post by adamwathan »

jermaustin1 wrote: post #15
baxtr wrote: post #7

Earlier quoted context omitted.

Please read this... > By comparison Tailwind seems really heavy (over 1.5x larger than Bootstrap!), but it turns out that this comparison isn't totally fair. https://tailwindcss.com/docs/controlling-file-size/#app

But couldn't you also do the same to Bootstrap with PurgeCSS and still come out ahead of Tailwind?

Tailwind would come out ahead because there are fewer classes that contain the same declarations, so the total number of style declarations would be less.

Re: Tailwind: style your site without writing any CSS

#140

Post by armandososa »

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 thing and compose your styles into components then you'll still have to write CSS with the weird syntax and add a PostCSS to your dev pipeline. Not to mention that you'll still have to have some kind of system for your class naming.

- The order of the clases does not matter, the specificity is decided by the order in which they appear in the source. I can see all kind of untraceable bugs coming from that.

I've used BEM and SMACSS and similar before and I think they are useful as a naming convention for teams but I don't think of them as great tools to writing better CSS. In my humble opinion CSS-in-JS solutions are closer to a great abstraction. I quite like both StyledJSX (for react) and .vue files in which you can write plain css and forget about the global aspects of CSS and the cascade for the most part.

But I can see why some people will dislike that as fiercely as they dislike tailwind.

I think Styled System is a better abstraction than tailwind: https://github.com/jxnblk/styled-system it's a React library but I can see it's principles could be extracted successfully to plain CSS.

Post reply on HN