DEV Community

Prabakar Badri
Prabakar Badri

Posted on

Migrating from Tailwind to SantyCss: A Practical Guide (v2.3.0)

Tailwind CSS is phenomenal. But after years of reading class="p-6 flex items-center justify-between gap-4 rounded-lg shadow-md" — I started wondering whether the brevity was costing us something.

SantyCss is my answer to that question: a utility-first CSS framework where every class name is written in plain English. It's not trying to replace Tailwind everywhere — but if you value self-documenting HTML, AI-friendly code, and zero build-step setup, it might be worth 10 minutes of your time.

Why Plain English?

When you write add-padding-24 make-flex align-center, three things happen:

  1. Junior devs understand the markup without looking at a Tailwind cheat sheet.
  2. AI assistants generate correct classes without needing a context file or plugin.
  3. Code reviews become meaningful conversations rather than abbreviation decoding sessions.

The tradeoff is verbosity. I think it's worth it.

Migrating from Tailwind

The migration CLI handles 150+ class patterns in one pass:

npx santycss migrate --input=src/
Enter fullscreen mode Exit fullscreen mode

A few manual conversions to know:

Tailwind SantyCss
flex items-center gap-4 make-flex align-center gap-16
p-6 mt-4 mb-8 add-padding-24 add-margin-top-16 add-margin-bottom-32
text-2xl font-bold set-text-32 text-bold
hidden md:block make-hidden tablet:make-block
btn btn-primary btn-lg make-button style-primary size-large

What's New in v2.3.0

  • Semantic dark-mode tokens (bg-surface, text-muted, text-accent) — add data-theme="dark" to any element and all utilities adapt automatically
  • 18 creature animations: bat, jellyfish, firefly, dragon, spider, butterfly — all free, no extra imports
  • Figma plugin (v1.8): inspect designs, get SantyCss classes instantly
  • VS Code IntelliSense (v1.4): autocomplete + hover docs across HTML, JSX, Vue
  • Modular imports: santy-start.css, santy-core.css, santy-variants.css

Getting Started 

npm install santycss
Enter fullscreen mode Exit fullscreen mode

Or use the CDN — no build step needed:

<link rel="stylesheet" href="https://unpkg.com/santycss/dist/santy-core.css">
Enter fullscreen mode Exit fullscreen mode

Links

Happy to answer questions. Honest feedback welcome — especially if you think I'm wrong about readability mattering. 🙂

Top comments (0)