Adam Wathan (Part 1): Deluded, Predator, Or An Outright Fraud?

Generally — as much as some folks might doubt it — I don’t like to do hit pieces directed at individuals. For years I’ve tried — and admittedly oft failed — to maintain two mantra:

1) Attack the work, not the person

2) Never attribute to malice that which can be adequately explained by incompetence.

But that has become increasingly difficult in a world of cult-like worship, peddling of outright lies, and unparalleled stench of ignorance found in web development.

And if anyone is the poster child for this, it’s Adam Wathan.

I have called him, others like Otto and Thornton, and in general those who slop endless pointless idiotic classes on everything predators; preying on the feeble minded and those who just don’t know any better.

I have to admit that may not have been fair on my part.

Certainly they make fraudulent claims about how their approach of writing two to ten times the markup, pissing on caching models, and recreating everything wrong with HTML 3.2 being magically somehow “easier” or “better for collaboration” or “scaling to large products” are 100% fraudulent, demonstrably so… but does that make these people frauds? Predators? Scam artists? Poseurs? Something else?

Certainly the halfwitted claims of said classes being “utility“ or “atomic” or some other such poppycock is marketing scam bullshit; but the person themselves being predators involves some sort of malicious intent.

If they were in fact being intentionally malicious, dipshit incompetent trash like bootcrap or failwind wouldn’t be as popular as they are. Or maybe they would… looking around at the world right now…

As much as I hate everything Wathan’s done, and how destructive his “hot and trendy media darling” rubbish has been to the industry, I’m not certain I’m seeing that malice.

And it is thus I can only assume the root cause of all this poppycock is ignorance. These jokers dove to make alternatives before they even grasped the most basic of HTML and CSS concepts, much less what the web is, how it works, or even what it’s for.

And remember I don’t generally mean “ignorant” as an insult, it just means you don’t know any better! You can FIX ignorant.

This is evident in their “screen media to blazes with everyone else” attitude where they slop screen presentation into the markup as classes, don’t use the media target to isolate the related stylesheet to just screen, and universally seem utterly and totally incapable of the most basic of semantic markup. Then they try to mislabel this use of PRESENTATIONAL classes under banners like “Atomic” or “Utility”. A total freaking crock of manure.

So Why Wathan Specifically?

Again, I don’t like going after just one person. Indeed there’s plenty of blame to spread around for this slow “redemption” of everything that was wrong with HTML coding and design practices 25 years ago. But Wathan has stuck his neck out making himself the “face” of this coding movement.

Or should I say bowel movement since that’s about what it’s worth?

Laugh is not too recently he made a tweet that he would like to throw down with somebody…

At the time he posted that every one of my social media accounts blew up with people saying “Do it! Do it! Show this clown who’s boss!” and the like. There I was bedridden, coughing up blood — I’m not in the best of health — and thinking “Well… ain’t that a daisy?”

Naturally when every competent coder on Muskie’s dumpster fire of mismanagement chimes in — laughably many calling me out by name — he stops posting and any effort to actually have this happen evaporates.

Of course it does. If you study his work, his writings, and indeed his entire approach to web development in such a competition the truth is he’d be a one legged man in an ass kicking contest.

Jokes aside: Adam, if you were serious and ever actually want to do this, “I’m your huckleberry.”

Sad Fact Is, He Didn’t Learn Enough HTML Or CSS For Any Of His Conclusions Or Methods To Be Correct, Proper, Or Of Any Value!

I don’t make that statement lightly, nor do I entirely blame him for that. Web development is rife with a lot of bullshit peddlers. Just look at the incorrect outmoded web-rot found at places like W3Schools or TutorialsPoint. The very concept of proper semantic markup — aka grammar norms that were taught in grade school in the ‘70’s that are now 4th year college majors — are not taught.

And this becomes apparent if you look at every single time he talks about “Semantic CSS” a concept that isn’t actually a thing, at least not compared to semantic MARKUP!

I see this a lot and to be frank, the only thing “semantic CSS” — which isn’t even CSS, it’s class names — brings to the table is maybe giving other developers an idea what your class is for and/or does. Whilst handy, that’s not where the word semantic even belongs in dealing with HTML. As terms go “semantic CSS” is incorrect, duplicitous, and seems to have been chosen specifically to be dismissive of the type of semantics that actually matters to many types of users. Instead, focusing on one that means jack-all to everyone except a handful who don’t even seem to grasp the most basic of semantic markup rules.

For Example His Inaccurate, Misleading, Card-Stacked “Utility vs. Separation” Article

He even starts out with the “Semantic CSS” BS, because I suspect he thinks DIV are semantic and the only reason to use semantics at all is for the convenience of other programmers. Completely failing to pay attention to semantic markup which is “content for everyone” not just the perfectly sighted on screen driven browsers.

His very first code example of “where he started from”

Has two DIV for nothing, an extra class for nothing, willy-nilly mixes PX and EM/REM just begging for broken layouts for users like myself — something failwind does in most every case — and generally reeks of not knowing enough HTML or CSS to be telling others how to code websites.

I mean he’s written:

<div class="container">  
  <div class="author-bio">
    <img src="https://cdn-images-1.readmedium.com/max/1600/0*o3c1g40EXj65Fq9k." alt="">
    <div>
      <h2>Adam Wathan</h2>
      <p>
        Adam is a rad dude who likes TDD, Active Record, and garlic bread with cheese. He also hosts a decent podcast and has never had a really great haircut.
      </p>
    </div>
  </div>
</div>

to do the job of:

<section class="imageCard">
  <img src="https://cdn-images-1.readmedium.com/max/1600/0*o3c1g40EXj65Fq9k." alt="Adam Wathan In Blue Sweatshirt">
  <h2>Adam Wathan</h2>
  <p>
    Adam is a snake oil peddler who likes to bamboozle people with his mentally enfeebled "Failwind" garbage. Adam, <strong>PLEASE Learn HTML!</strong>
  </p>
</section>

I can forgive the use of at least one DIV, since he probably wrote that before SECTION was real-world reliable and/or commonplace… but from there it’s utter and total garbage. The typical “DIV soup” and “do you really need that extra markup” common to those who choose their HTML based on what they want things to look like.

See this little rewrite for how I’d do the same thing:

Of course he also used the convoluted hard to follow “nesting” of SCSS-style code. Not a fan. Side note, I keep coming across developers who rail against endless nested else, but are chomping at the bit for native nesting in CSS. Which is it?

It is hardly a wonder given the bad practices in his “vanilla” demo that he got suckered and hoodwinked into the garbage that is BEM.

Don’t get me wrong, I want to like BEM, any time someone comes up with a consistent naming convention I’m usually all in… but what it’s used for, slopping classes onto everything for no good reason? 100% hurr-durrz. That he would even consider this bloated halfwitted disaster an “improvement”

<div class="author-bio">
  <img class="author-bio__image" src="https://cdn-images-1.readmedium.com/max/1600/0*o3c1g40EXj65Fq9k." alt="">
  <div class="author-bio__content">
    <h2 class="author-bio__name">Adam Wathan</h2>
    <p class="author-bio__body">
      Adam is a rad dude who likes TDD, Active Record, and garlic bread with cheese. He also hosts a decent podcast and has never had a really great haircut.
    </p>
  </div>
</div>

Shows how badly he was already “too far gone” heading the exact opposite direction he should have. Consuming a case of ex-lax and squatting over your markup waiting for it to do its thing is NOT the flipping answer. It is no shock that if he thought this idiocy was an “improvement” in any way, shape, or form, that he ended up copying bootcrap and other framework’s “monument to 1997” methodologies in creating failwind.

And this is truly well illustrated when he says:

My markup wasn’t concerned with styling decisions, but my CSS was very concerned with my markup structure.

Exactly, because content dictates markup, markup + content + device/user limitations dictates layout. Your markup should not be that concerned with your SCREEN styling decisions because that’s none of HTML’s huffing business!

WHY?

Because HTML is about MORE than just sighted users on visual user-agents (browsers). This seems to be where he completely failed the entrance exam and started taking the short bus.

Braille doesn’t give a flying f*** about your layout. Nor does TTY. Nor should screen readers. Bigger tip: Search engines don’t have eyeballs! So why waste bandwidth sending classes saying your screen only appearance to everyone?

This is one of the core reasons CSS even exists separate from HTML, why presentational markup and attributes were deprecated, and so forth. It’s why:

class="text-center font-400-red font-lg"

Is as utterly mind-numbingly 25+ years out of date as:

<center><font color="#" size="+2">

You are literally recreating everything wrong with HTML 3.2. Thus his little article just keeps vomiting up worse and worse bloated, harder to work with code all because he won’t embrace some of the most basic reasons HTML and CSS even exists.

Things go even further south when he talks about reusability; where he gave something far too specific a name, then complains that it doesn’t make sense when reusing it. He tries to use this as justification for shitting on the markup with even more classes, instead of just using a more generic but still descriptive name. He literally argues that taking the harder approach is magically somehow easier.

He has this:

<div class="author-bio">
  <img class="author-bio__image" src="https://cdn-images-1.readmedium.com/max/1600/0*o3c1g40EXj65Fq9k." alt="">
  <div class="author-bio__content">
    <h2 class="author-bio__name">Adam Wathan</h2>
    <p class="author-bio__body">
      Adam is a rad dude who likes TDD, Active Record, and garlic bread with cheese. He also hosts a decent podcast and has never had a really great haircut.
    </p>
  </div>
</div>

Laundry list of how not to use HTML, and wants to reuse it for something that isn’t an author bio. You could either just add the classes to your stylesheet sharing the same style declarations, or you could use a more generic name like “imageCard” saying that it’s a flat card with a image. That’s not saying what it looks like, that’s saying what it is, and a detail about what it contains. And if the browser makers would stop making excuses for not implementing :has...

So Let’s Look At What 4 Strict and CSS Were Actually Made For!

There were a multitude of factors that made this garbage approach of saying what things are vs. what things look like transformed HTML with 4 Strict.

1) Accessibility

Again, non-visual UA’s don’t give a flying purple fish what colour or font things are, or about padding, widths, and layouts. That’s why presentation conceptually / structurally has zero business in markup. AGAIN, HTML is for everyone, not just the sighted.

That’s why semantic markup exists. In theory it’s why a lot of the extra tags added in HTML 5 exist even if they can be redundant to existing tags.

But more importantly it’s why if you’re running your mouth about “semantic classes” you are either ignoring or unaware of where semantics actually matter.

Your markup should be chosen to say what things are grammatically and structurally, so that the user-agent can best convey that meaning irregardless of device or user limitation.

That’s why THE (singular) H1 is THE heading (singular) that everything on every page of a document collection (website) is a subsection of. That’s why H2 mark the start of major subsections with the first H2 being the main content if you don’t use <main>. It’s why H3 are the start of a subsection of the H2 preceeding them. H4 are the start of a subsection of the H3 preceeding them… care to guess what H5 and H6 MEAN?

THEY DO NOT MEAN FONTS IN DIFFERENT WEIGHTS AND SIZES. You are not supposed to pair them for headings and taglines. You are not supposed to skip straight from an H2 to an H6. You are NOT supposed to have the first heading on a page be a lower depth (higher number) than the H1.

Just as P is for a grammatical paragraph, not “I want a margin around this”. UL is for a unordered list of short bullet points or selections. TABLE is for tabular data where the rows and columns have a semantic relationship, not just “eye wunts teh culumsies”

And it’s why <link> and <style> have the media attribute, so you can target specific devices either by type (screen, print) or by @media or even @supports. As I’ve been saying for well over two decades:

If you see a stylesheet <link> or <style> lacking media="screen" for what is quite clearly screen only style, you’re looking at code made by people who don’t know the first damned thing about HTML or CSS.

And that’s someplace that damned near everything I’ve ever seen Failwind used — even the official examples and the shit show of incompetence that is Tailwind UI — falls flat on their face. As simply pulling up a document outline would clearly show.

2) DRY — Reducing Repetition

It’s funny, I’ve been seeing people rail against “Don’t Repeat Yourself” code lately, just showing what utter halfwits, morons, and fools are making it into the industry. Again, why systems like Failwind and Bootcrap make you work harder, not smarter.

It’s like people have forgotten the horrors of writing gibberish inaccessible non-semantic markup like:

<center>
 <table cellpadding="8" cellspacing="0" border="1" width="768">
  <tr>
   <td align="right" valign="middle" colspan="7">
    <font size="+3"><b>Adam Wathan</b></font>
   </td>
  </tr><tr>
   <td align="right" valign="middle">
    <a href="/articles">
     <font color="#666" size="-1"><b>Articles</b></font>
    </a>
   </td>
   <td align="right" valign="middle">
    <a href="/talks">
     <font color="#666" size="-1"><b>Talks</b></font>
    </a>
   </td>
   <td align="right" valign="middle">
    <a href="/screencasts">
     <font color="#666" size="-1"><b>Screencasts</b></font>
    </a>
   </td>
   <td align="right" valign="middle">
    <a href="/podcast">
     <font color="#666" size="-1"><b>Podcast</b></font>
    </a>
   <td align="right" valign="middle">
    <a href="/courses">
     <font color="#666" size="-1"><b>Courses</b></font>
    </a>
   <td align="right" valign="middle">
    <a href="/projects">
     <font color="#666" size="-1"><b>Projects</b></font>
    </a>
   <td align="right" valign="middle">
    <a href="/journal">
     <font color="#666" size="-1"><b>Journal</b></font>
    </a>
   </td>
  </tr>
  </table>
</center>

Replacing the table/font tags and presentational attributes for classes DOES NOT FIX THE DAMNED PROBLEM!

Particularly when any competent coder would likely do this today:

<header>
  <h1><a href="/">Adam Wathan</a></h1>
  <nav id="mainMenu">
    <ul>
      <li><a href="/articles">Articles</a></li>
      <li><a href="/talks">Talks</a></li>
      <li><a href="/screencasts">Screencasts</a></li>
      <li><a href="/podcast">Podcast</a></li>
      <li><a href="/courses">Courses</a></li>
      <li><a href="/projects">Projects</a></li>
      <li><a href="/journal">Journal</a></li>
    </ul>
  </nav>
</header>

Because the HTML should not care about the final appearance one damned iota. That’s not its job. Imagine how someone using Bootcrap or Failwind would write that. Oh wait, you don’t have to:

     <div>
        <a href="/" class="block text-black no-underline font-bold text-xl lg:text-3xl font-extrabold leading-none lg:leading-tight">Adam Wathan</a>
        <div class="hidden md:flex mt-3 lg:mt-4 uppercase tracking-wide text-xs spaced-x-6">
          <a href="/articles" class="text-grey-dark  font-semibold no-underline hover:text-black">Articles</a>
          <a href="/talks" class="text-grey-dark  font-semibold no-underline hover:text-black">Talks</a>
          <a href="/screencasts" class="text-grey-dark  font-semibold no-underline hover:text-black">Screencasts</a>
          <a href="/podcast" class="text-grey-dark  font-semibold no-underline hover:text-black">Podcast</a>
          <a href="/courses" class="text-grey-dark  font-semibold no-underline hover:text-black">Courses</a>
          <a href="/projects" class="text-grey-dark  font-semibold no-underline hover:text-black">Projects</a>
          <a href="/journal" class="text-grey-dark  font-semibold no-underline hover:text-black">Journal</a>
        </div>
      </div>

DRY? What’s that?!? I can’t imagine where I got that code from.

I mean sure, the markup, the base proper semantic tags are very WET… but in that case why piss on them further?

One of the simplest rules of applying classes for style:

If all child elements inside a parent container are getting the exact same classes, NONE OF THEM have any business having a class on them!

Use classes for when something is different, or to group a bunch of tags. Boom, a fraction the code for zero real extra effort.

If you cannot see how the “presentational class” approach — that they’ve gone full marketing turd calling them “utility”— is the exact same mental failings as HTML 3.2, you might want to buy a braille reader. Worse still the run-on sentence masquerading as a menu completely devoid of the most basic of semantic markup, since anchors are as semantically neutral as DIV or SPAN. Even 20 years ago DIV with a bunch of anchors slopped in it was dumbass rubbish made by people not qualified to write a single damned line of HTML!

It is thus that using garbage like failwind ends up making you write two to ten times the markup needed, for as much if not more code… and why? “Wah wah eye bee two stew peed two yews too seprate filez?”

But it’s not just the code bloat in the markup replicating the code bloat of “we had to make a class for everything”, nor does Failwind’s “Just pre-compile it out” fix the next issue:

3) Caching, Parallelism, And Load Delays

It used to be common knowledge that the more you move out of the markup, the faster the page will load. User-agents and servers can transmit multiple files simultaneously, but only once they know what files to send. This parallelism is a very important thing to leverage… but guess what?

It cannot start until the markup is loaded. NO, preload link and / or HTTP 2 push do NOT fix that!

The same can be said of cache. If you have presentation shared across pages, why waste time sending it in the markup every single joe-blasted time. It’s why it’s comedy gold how often people dive for SPA on what are basically static sites, all because they’re too stupid to practice the separation of concerns.

Even more so if you use a monolithic stylesheet to 1) keep the file counts down, 2) pre-cache the appearance of subpages.

Dumping all your presentation into the markup not only wastes bandwidth for non-screen users, it also pisses away a caching opportunity and delays loading of sub files!

It can also screw things over if you stop thinking about just the client side.

4) Reducing Server Side Complexity, Load, and Speed.

The less code in the markup, the less you have to dick with server side. Thus nonsense like Tailwind only makes server-side developers lives harder. If you can tell them “Just make this markup, don’t care at all about presentation that’s the front end guy’s job” with simpler, cleaner markup, they’re gonna be happy guys! Why hand them 10 to 100k of garbage doing 5 to 20k’s job?

Smaller markup means less time gluing strings together, lower memory footprint, faster execution… it even reduces a lot of CPU load since there’s going to be less stuff to waste time gzipping!

And sure, that will cue up the usual string of lame excuses such as “But the real overhead is database” or “it’s so small as to be insignificant”. Then explain how PHP 7 sped up almost everything 30% or more without touching how database works. Tell that to the marketers who are now looking at things like “First contextual Paint” or “First meaningful paint”, or diving into waterfalls to bitch out developers about excessively long wait between TLS completion and transmission of data.

All things slopping out two to ten times the markup needed to do the job takes a leak on from so on-high, you’d think the almighty just got back from a kegger.

What makes this comic tragedy is how many developers defend trash like Tailwind, but at the same time gripe about functions doing too much, failing to break out every little pathetic little detail into its own module, endless nested if/else… and yet they cannot recognize that these presentational “screen media plow everyone and everything else” classes are the exact same mentality? You want a function that “does too much” try taking Tailwind for a spin with its presentational classes. Or just look at the DIV soup and gibberish to nonexistent semantics of each and every Joe-blasted official example.

And seriously, if you don’t mind having to navigate three directories deep halfway across the code to track down some stupid little function that probably shouldn’t even be separate from the code calling it, but have a problem accessing a stylesheet?

Seriously, those of you working on the back end, sooner or later you have to make your system output content as markup. Even if that markup is handed to you by the front end guy, which of these would you rather work with?

The Tailwind way?

function Notification({ imageUrl, imageAlt, title, message }) {
  return (
    <div className="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
      <div className="shrink-0">
        <img className="h-12 w-12" src={imageUrl.src} alt={imageAlt}>
      </div>
      <div>
        <div className="text-xl font-medium text-black">{title}</div>
        <p className="text-slate-500">{message}</p>
      </div>
    </div>
  )
}

Or what any sane and rational developer would find overkill?

function Notification({ icon, title, message }) {
  return (
    <section className="message icon_{icon}">
      <h2>{title}</h2>
      <p>{message}</p>
    </section>
  )
}

You want to know how mind-numbingly dumbass those PRESENTATIONAL classes and an ignorance of basic HTML practices are, there it is!

And Wathan Clearly Doesn’t Care, Know, Or Understand ANY Of These Things.

’Cause if he did, he wouldn’t have created Tailwind in the first place. His system — and those prior to it like bootstrap — were clearly built either not understanding these basic concepts, or as I keep saying intentionally and wilfully thumbing their nose at it.

And again, he’s by no means unique in this regard, and that’s why the outdated outmoded practices he promotes leads to so many clients I’ve helped with efficiency or accessibility issues were utterly, totally, and completely screwed over by it! As I’ve said many the time:

For people who know nothing about websites, BY those who know nothing about websites is no plan for success!

But It Gets Worse

If you dig into any of the documentation for Tailwind, you’ll find blatant “we don’t know what we’re doing” all over the place. I’ve joked for ages about this page alone:

Being sufficient to send any competent coder running and screaming the opposite direction. If you don’t understand what’s wrong with that? Two letters: “PX” — already a sign of “double dumbass development” — mated to the fact they use EM/REM fonts by default.

If I have to explain what’s so wrong about that, learn what EM/REM are, how they work, and who they’re for, and why using pixel breakpoints with EM or REM is about as utterly wuckfitted as you can get.

But naturally arsebreeze never fails to double down on the stupid.

That page has some real gems.

Starts out trying to once again sell us on the marketing scam propaganda bunko “utility class” chazerei, all to hide the fact that they’re presentational classes. Utter and total attempt to deflect, mislead, and pretend they’re something they are not.

Then they have their first example of typical arsebreeze dimwittery:

<div>
  <div class="flex items-center space-x-2 text-base">
    <h4 class="font-semibold text-slate-900">Contributors</h4>
    <span class="rounded-full bg-slate-100 px-2 py-1 text-xs font-semibold text-slate-700">204</span>
  </div>
  <div class="mt-3 flex -space-x-2 overflow-hidden">
    <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""/>
    <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""/>
    <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80" alt=""/>
    <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""/>
    <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""/>
  </div>
  <div class="mt-3 text-sm font-medium">
    <a href="#" class="text-blue-500">+ 198 others</a>
  </div>
</div>

Setting aside this is 2023 so why DIV instead of SECTION, what’s with the outer DIV for nothing, the multiple inner DIV for nothing possibly doing HEADER and FOOTER’s job if they’re needed at all? Or how about how unlikely it is that a section like this would actually be down at H4 depth? Between the presentational classes and “DIV soup”, it’s 1.55k of markup doing the job of not even 1k of markup:

<section class="userList">
  <header >
    <h2>Contributors</h2>
    204
  </header>
  <img src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
  <img src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
  <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80" alt="">
  <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
  <img src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
  <footer>
    <a href="#">+ 198 others</a>
  </footer>
</section>

And only 512 bytes of CSS as this pen shows:

Now sure I’m missing the custom properties and ballparked the colour values, but that it’s basically the same amount of code but they had to jump through all these crazy nonsensical hoops to reach that point? And whilst yes it’s the same overall amount of code, consider again we just ripped half a k out of the markup starting parallelism sooner, adding caching and pre-caching, and reducing server load. And yes that might only be a few k, but over an entire page and entire site that scales up. Especially on more complex sites.

That they then show all sorts of batshit ways to make you THINK you’re not repeating yourself, from stupid editor tricks to letting a loop shit out the exact same code bloat? /FAIL/ at basic web development.

The real stupid though is the final section using @apply https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply

Congratulations, you just spent hours if not years undoing the entire reason CSS exists and sharting on your code to build a monument to HTML 3.2, and now you’re going to use @apply to turn it back into what you’d have with CSS from the flipping start! You are literally suggesting undoing everything your entire system does as a fix for what your system does.

Excepting of course that by the time failwind does its derpitude and you actually build the result, the output is right back to the exact same mentally enfeebled presentational class on everything bullshit. Just now you get painfully cryptic two-letter classes to try and obfuscate how dumbass it all is.

Of Course, There Are The Lame Defenses

But what about scalability? What of it? Everything I’m saying scales upwards to larger projects!

It’s where the “two times the markup” of a small example becomes “ten to twenty times the total code” once you’ve got dozens if not hundreds of separate pages. It’s where what should be one or two small projects that need maybe three people at MOST to maintain become behemoth sized train wrecks a staff of a hundred can’t even make sense out of.

Thus every one of you who will try to say things like “but large scale enterprise” or “Well you just never worked on big projects” are making dumbass assumptions. Likely because you either have projects two to ten times larger than they should be, or you’ve never worked on a TRUE “enterprise scale” project.

I have written pervasively multithreaded Ada code running under RTOS such as QNX for “alphabet soup” organizations. I’ve written large scale “thousand-series” double entry accounting systems that still power major institutions. I’ve got RCA 1802 machine language in orbit. I was writing assembly before Adam was a twinkle in his daddy’s eye.

Don’t tell me I’ve never worked on “big projects!”

But he’s a huge success. Yes, that can happen with the right packaging no matter how big the scam or ignorant the gibberish. A lot of outright ignorant fools are huge success stories. Just look at MTG or Bobo the Clown. So shockingly dumb I have trouble believing they know how to breathe, and yet they’ve risen to positions of power.

But Tailwind is used by thousands, possibly millions! Bandwagon fallacy. Just because something is popular doesn’t mean its good, right, or correct. It just means lots of gullible fools have yummed up the bullshit the same way MAGA morons follow Trump around with a 20oz wax paper drink cup in hopes his bung is actually an Orange Julius.

As I often say:

Once you can convince people there’s a cruel vain capricious genocidal sky wizard threatening us with eternal torment “because he loves us” the kid gloves come off on the amount of bullshit you can make them spoon up as if it were chocolate soft-serve.

I’ve said it before, and apologies for repeating it, but all sorts of people beleive all sorts of crazy nonsensical fairy tales. From shoving jade eggs up the holiest of holies being good for a woman’s health, to the earth being flat, to thinking an orange cheeto-fingered half-tweet is a “really stable genius”, to thinking you can get health advice from some know-nothing turd calling himself an avocado, to actually thinking we were all created by that self-centered egotistical fairy-tale sky wizard.

Doesn’t make a single damned one of them right. Whenever someone uses “but millions of people believe it” as their idea of “proof” — FOR ANYTHING — I know I’m dealing with someone who had an umbrella when it was raining brains.

And That’s Where The Lies Come Into It.

Or more accurately, the propaganda. I’ve written about propaganda and web development in the past, and few places is it found in its most naked ugly pock-marked maggot infested form than with Tailwind.

It starts out as always with the glittering generalities such as the wild unfounded nonsensical gibberish claims of being “easier”. A situation only true of you utterly give up on giving a damn about the end user, but worse demonstrably false thanks to the simple fact you end up writing as much if not more code than you’d have without it. And as I keep saying, for what? “I’m too stupid to keep track of my CSS and selectors?”

“Better for collaboration” is another one. Because of course using two to ten times the markup makes it easier to work with others. Because it makes the back end guy’s life so much easier. Because you would/should have so much CSS that it’s too hard to maintain.

Maybe — again broken record — if y’all stopped using 100k of HTML, 500k of CSS, and 2 megabytes of JavaScript for pages that don’t warrant more than 10k of HTML, 48k of CSS (for an entire site, MAX), and little if any JavaScript, maybe… JUST MAYBE you wouldn’t be making up nonsensical gibberish about problems you shouldn’t even have in the first damned place!

Same for “speeds up development” — for Christmas sake learn HTML. Again, if writing as much if not more code than needed, using an entire separate system you have to — or at least should — learn on top of the underlying language, makes you “faster” then you don’t know what fast is, or Dunning-Kruger is taking lessons from Naughty By Nature.

Say somethin’ positive? Well positive ain’t where I live. I live right around the corner from West Hell, Two blocks from South Shit, and once in a jail cell.

— “Everything’s Gonna Be Alright / Ghetto Bastard”

Probably the worst though is “Utility classes”, a hand-waving way to claim that it’s not presentational classes replicating presentational markup taking a trip with Mr. Peabody back to 1997. Marketing bunko designed to steer the conversation away from the truth.

From everything I know about HTML and CSS, every single claim of merit attributed to Tailwind and systems like it are fraudulent! Bald faced lies. So blatantly false yet consumed so eagerly by the masses that Joseph Goebbels would stand in rock-star awe of it! Obtuse, addle-minded drivel created by people unqualified to flap their yap on the topic, and parroted by gormless followers who are one Senate investigation away from a tainted flavor-aid party. Or is it a UFO behind Haley’s comet yogurt and purple robes party? Can never keep that straight.

Which of course is why when you point out these failings and the outright gullibility, the “true believers” react like you just took a dump in their cornflakes after impregnating their wife, sister, and cat. I woulda ****ed your moms, but the b**** is too fat.

But Does That Make Wathan A Fraud Or A Predator?

Nothing he’s done addresses any of the real issues in web development. Instead he has gone out of his way to recreate everything that made HTML 3.2 an absolute disaster to work with. It’s unfathomable that he could have gotten this far if it were intentional malice, and yet given the absolutely screwed up nature of our society?

Wizard’s First Rule comes into play.

People are stupid; given proper motivation, almost anyone will believe almost anything. Because people are stupid, they will believe a lie because they want to believe it’s true, or because they are afraid it might be true. People’s heads are full of knowledge, facts, and beliefs, and most of it is false, yet they think it all true. People are stupid; they can only rarely tell the difference between a lie and the truth, and yet they are confident they can, and so are all the easier to fool.

— Terry Goodkind

A lot of people believe Wathan because they WANT there to be an easier way. Or they are afraid that the vanilla way is harder. Or they are afraid to learn things that contradict what they already know. Or they get suckered and hoodwinked by the illusion of success.

Which is a very different thing from actual success. That’s where “cognitive dissonance” can play a big part.

Same for the card stacked examples. This is where things are equally hard to measure as are they really so ignorant of vanilla HTML and CSS they think their “this way is bad” examples are how things would be done, or are they intentionally sabotaging the vanilla versions to make their bullshit look good? The latter is the one that seems likely on the face of it, but what if those garbage examples explain WHY those like Wathan believe the nonsense they do? That’s confirmation bias.

I think what has happened is that like a great many people, Wathan started to believe his own BS. The same way Russia suckered itself with its own propaganda regarding its alleged “military might”. Despite having a fraction the wealth or military budget of a real world power mated to zero ability to long term project that power due to corruption, lack of training, lack of resources, and just plain lack of logistics.

But as I recently told someone, sometimes you’ve just got to let people make their own mistakes. Otherwise they’ll never learn.

When you start to believe your own views that were made with incomplete information and false assumptions? Well again that’s Dunning-Kruger. Mix in some long term confirmation bias and things can get really ugly really fast.

I’m constantly checking myself on that. Chechekity-check yo’self before you wreck yo’self. I don’t just rail against something without first checking WHY it exists. I look things up, I try to study all the different approaches. But time and time again after four and a half decades of programming it’s painful to see the same mistakes repeated. I keep seeing the same stupid rebranded, repackaged, and ready to prey on the gullible, the fearful, and the hopeful.

It’s insane! The same broken garbage over and over again. No, this time will be different. No no, this time, it’ll be different. That is crazy.

So he might be a sham and is clearly making fraudulent claims. But does he even know that he’s full of it? Even the slightest inkling of how far off the rails his nonsens is, and how much it’s making everyone work harder, nto smarter?

You read his little “semantic vs. utilty” article and it’s clear that every decision he made after his starting point was the opposite of sane and rational development? BEM was actually a step backwards, and he liked it? By working HARDER?

I honestly don’t think he ever saw properly used HTML or CSS, or learned enough about WHY things were the way they were before he shoved both fingers in his ears, started yelling “lalalala” like a dollar store Vancome Lady, and went off on a tangent to recreate the worst of mid-90’s development practices.

Without actual intent of malice he’s not a predator. Well, right up until you get into “Tailwind UI”. When they have the giant donkey brass to charge money for broken, bloated, inaccessible train wreck “templates” built on this mountain of lies? THAT’S PREDATORY!

I’m going to stop here, this article is already longer than I planned. Certainly wasn’t planning a part 2 but i’ve not even gotten as far as my usual “rewrite to show how bad their stuff is” that’s my bread and butter.

Part 2 here: