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
truncateorshrink-0actually 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.
Top comments (0)