Hacker News Reader

Comment by art0rz | Hacker News Reader

I find CSS terrible to work with but I fail to see how this is any better.

  <div class="[grid-area:span_1_/_span_1_/_span_1_/_span_1] max-[991px]:h-[400px] max-[767px]:h-[250px]">

View on HN

Do you think that's representative of average tailwind, or have you chosen a particularly horrible case?

Edit: looking around my codebases (granted I don't write much code anymore) most of it doesn't look like that, but a small amount of components do have some gnarly classes.

Not really. I copied one of the components and picked a random line. Some were worse than this.

Actually, looking at some examples, this is absolutely atrocious markup. Tons of empty divs with random CSS properties that are invisible and take up zero space. Hardcoded color values that should use the Tailwind color scales.

My bet is that they made some designs with WYSIWYG in Webflow, and automatically converted them to Tailwind.

EDIT: The dead giveaway is that they’re not using Tailwind’s breakpoints, but instead hardcoded ones, that happen to all be the same as Webflow’s hardcoded breakpoints - 478, 767, and 991 pixels.

I’m a fan of TailwindCSS and use it when I can, but damn. That is an abuse of the Tailwind JIT compiler. Utility classes are not an invitation to abandon custom CSS entirely.

I am familiar with TW, but not familiar with this syntax. Can someone explain or link to where it explains it?

Reply on news.ycombinator.com