Introducing Passingwind: A Spiritual Successor to Tailwind CSS

By Zhenyi Tan

There’s something in the air. What is it?

So Shopify acquired Tailwind. Many frontend devs are probably worried. When I write my flex items-center justify-between next time, is it going to show a popup asking me to open an online store? So I built a Tailwind alternative in the past few days. I call it Passingwind.

The biggest problem with Tailwind is that the HTML is unreadable. All those classes are distracting you from the actual markup:

<div class="gap-4 px-6 py-3 rounded-xl bg-white shadow-md hover:shadow-lg md:px-8 lg:gap-6">

I think HTML should stay a markup language. And we should put styles in one place. Passingwind solves this beautifully. Okay, now you’re probably thinking: “Is this a joke post where you reinvent CSS?” Nah. CSS has curly braces. Braces are for teeth. We’re not going back to the caveman way.

In Passingwind, every style goes on the <html> element, keeping the rest of the HTML clean. It’s the best of both worlds.

If you want:

body { width: 800px; margin: 0 auto; }

You write:

<html class="body-width-800 body-margin-0-auto">

Want to set the font size of h1 and the color of buttons? Just keep adding classes:

<html class="h1-font-size-60 button-background-color-blue">

Adding a hover state:

<html class="button-hover-background-color-red">

Responsive design:

<html class="at-media-max-width-800-body-width-100-percent">

Putting it all together:

<html class="body-width-800 body-margin-0-auto h1-font-size-60 button-background-color-blue button-hover-background-color-red at-media-max-width-800-body-width-100-percent">
  <body>
    <h1>Title</h1>
    <button>Click Me</button>
  </body>
</html>

Look how clean that HTML is. No classes on <body>, <h1>, or <button>. Isn’t it great?

I’m still working on the selectors1. Because there are too many permutations. Currently Passingwind supports <h1>, <button>, and <div>, which is more than enough for most people.

As for monetization, Passingwind Plus ($29/mo) includes a JIT compiler that puts all the classes in a separate file. One rule per line, selector on the left, properties in curly braces. This makes your styles easier to read and debug.

  1. I tried to vibe code this, but Claude said I’m an idiot and was ashamed to have co-authored it. ↩