DEV Community: Prabakar Badri

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

Prabakar Badri — Sun, 29 Mar 2026 12:30:39 +0000

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:

Junior devs understand the markup without looking at a Tailwind cheat sheet.
AI assistants generate correct classes without needing a context file or plugin.
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/

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

Or use the CDN — no build step needed:

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

SantyCSS: The CSS Framework That Finally Reads Like English

Prabakar Badri — Sun, 29 Mar 2026 00:52:08 +0000

If you've ever stared at a wall of Tailwind classes like p-6 mt-4 flex items-center justify-between border-l-4 border-blue-500 rounded-xl shadow-lg and thought "there has to be a better way" — meet SantyCSS.

SantyCSS is India's first utility-first CSS framework, and it just hit v2.0 with over 8,500 utility classes — all written in plain English that you can actually read out loud and understand instantly.

The Core Idea: CSS That Makes Sense

The whole philosophy is simple: class names should say what they do.

Instead of memorizing shorthand codes, you write what you mean:

Tailwind	SantyCSS
`p-6`	`add-padding-24`
`mt-4`	`add-margin-top-16`
`flex`	`make-flex`
`items-center`	`align-center`
`border-l-4`	`add-border-left-4`
`rounded-xl`	`round-corners-12`
`hover:scale-105`	`on-hover:scale-105`

No lookup table. No mental translation. You just write add-padding-24 and it pads by 24px. Done.

Zero Build Step — Seriously

This is a big deal. Most modern CSS frameworks require Node.js, a config file, a CLI tool, a build pipeline... SantyCSS requires none of that.

Just drop one <link> tag in your HTML and you're building:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/santycss/dist/santy-start.css">

That's it. Works in any HTML file, any framework, any environment — no install, no config, no CLI.

What's Included in v2.0

20-Palette Color System

20 color families x 10 shades each — covering text, background, border, fill, and stroke. Plus full dark mode variants out of the box.

Responsive Variants

Prefix any class with on-mobile:, on-tablet:, md:, or lg: for breakpoint-specific styles. No configuration needed.

State Variants

Hover, focus, active, and disabled states with readable prefixes like on-hover: and on-focus:.

Pre-built Component Shortcuts

Common UI patterns are already baked in: .btn, .card, .input, .badge, .alert, .spinner — use them as base classes and extend with utilities.

VS Code IntelliSense Extension

A free VS Code extension gives you autocomplete, hover docs, and a live CSS preview for every SantyCSS class — right inside your editor.

Framework Integration

SantyCSS works as a drop-in for every major JS framework — React/Next.js, Vue/Nuxt, Vite, SvelteKit, Astro, and plain HTML/CDN. Purge works exactly like Tailwind, so tree-shaking is familiar.

Who Should Use SantyCSS?

Beginners who find Tailwind's shorthand confusing
Teams where code readability and handoff speed matter
Rapid prototypers who don't want to set up a build pipeline
Anyone who's ever had to Google what truncate or shrink-0 actually does

Getting Started

Via CDN (fastest):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/santycss/dist/santy-start.css">

Via npm:

npm install santycss

Explore the docs, playground, components, icons and templates at santycss.santy.in

Final Thoughts

SantyCSS isn't trying to replace Tailwind for everyone. It's offering something Tailwind never prioritized: human-readable code. When your CSS reads like plain English, onboarding is faster, reviews are easier, and you spend more time building and less time decoding.

Give the playground a spin. You might not go back.

Built in India | MIT License | v2.0.0

Have you tried SantyCSS? Drop your thoughts in the comments — I'd love to hear how it compares to your current workflow.

DEV Community: Prabakar Badri

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

Why Plain English?

Migrating from Tailwind

What's New in v2.3.0

Getting Started

Links

SantyCSS: The CSS Framework That Finally Reads Like English

The Core Idea: CSS That Makes Sense

Zero Build Step — Seriously

What's Included in v2.0

20-Palette Color System

Responsive Variants

State Variants

Pre-built Component Shortcuts

VS Code IntelliSense Extension

Framework Integration

Who Should Use SantyCSS?

Getting Started

Final Thoughts