DEV Community

Alex Spinov
Alex Spinov

Posted on

UnoCSS Has a Free API — The Instant CSS Engine Replacing Tailwind

#javascript #css #webdev #tutorial

UnoCSS is the instant, on-demand atomic CSS engine that's replacing Tailwind CSS for thousands of developers — and its entire API is free and open source.

Why UnoCSS Over Tailwind?

UnoCSS is not a framework — it's an engine. You define the rules, it generates the CSS. And it's absurdly fast:

  • 1000x faster than Tailwind in benchmarks (200x faster HMR)
  • Zero parsing — regex-based extraction
  • Fully customizable — bring your own conventions
  • Tailwind-compatible — use the same class names if you want
  • Pure CSS Icons — any icon from Iconify (200K+ icons) as CSS

Quick Start 

# Install
npm install -D unocss

# vite.config.ts
import UnoCSS from "unocss/vite";

export default {
  plugins: [UnoCSS()]
};
Enter fullscreen mode Exit fullscreen mode 
/* uno.css — import in your main file */
@import "uno.css";
Enter fullscreen mode Exit fullscreen mode

That's it. Start writing utility classes.

Presets (The Killer Feature) 

// uno.config.ts
import {
  defineConfig,
  presetUno,       // Tailwind/Windi compatible
  presetIcons,     // 200K+ pure CSS icons
  presetTypography, // Prose styles like @tailwindcss/typography
  presetWebFonts,  // Google Fonts auto-import
} from "unocss";

export default defineConfig({
  presets: [
    presetUno(),
    presetIcons({
      scale: 1.2,
      cdn: "https://esm.sh/"
    }),
    presetTypography(),
    presetWebFonts({
      provider: "google",
      fonts: { sans: "Inter", mono: "Fira Code" }
    }),
  ],
});
Enter fullscreen mode Exit fullscreen mode

One config. Four features that would need separate packages in Tailwind.

Pure CSS Icons (No JS, No SVG Files) 

<!-- Any icon from Iconify — 200,000+ icons -->
<div class="i-carbon-sun text-2xl" />
<div class="i-mdi-github text-3xl text-gray-800" />
<div class="i-logos-vue text-4xl" />
<div class="i-ph-rocket-duotone text-red-500 text-5xl" />
Enter fullscreen mode Exit fullscreen mode

No icon fonts. No SVG imports. No JavaScript. Pure CSS.

Attributify Mode 

<!-- Traditional (Tailwind-style) -->
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
  Click me
</button>

<!-- Attributify mode (cleaner HTML) -->
<button
  bg="blue-500 hover:blue-600"
  text="white"
  p="x-4 y-2"
  rounded
>
  Click me
</button>
Enter fullscreen mode Exit fullscreen mode

Shortcuts (Custom Compositions) 

// uno.config.ts
export default defineConfig({
  shortcuts: {
    "btn": "py-2 px-4 font-semibold rounded-lg shadow-md",
    "btn-green": "btn text-white bg-green-500 hover:bg-green-700",
    "card": "p-6 bg-white rounded-xl shadow-lg space-y-4",
    "input": "border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500",
  },
});
Enter fullscreen mode Exit fullscreen mode 
<div class="card">
  <input class="input" placeholder="Email" />
  <button class="btn-green">Subscribe</button>
</div>
Enter fullscreen mode Exit fullscreen mode

Variant Groups (Unique to UnoCSS) 

<!-- Without variant groups -->
<div class="hover:bg-gray-100 hover:text-gray-800 hover:font-bold" />

<!-- With variant groups (cleaner) -->
<div class="hover:(bg-gray-100 text-gray-800 font-bold)" />

<!-- Dark mode -->
<div class="dark:(bg-gray-900 text-white border-gray-700)" />
Enter fullscreen mode Exit fullscreen mode

Performance Comparison

Metric UnoCSS Tailwind CSS
HMR speed ~0.2ms ~40ms
Build time Instant Seconds
Bundle size Only used classes Only used classes
Config Optional Required
Icons Built-in (200K+) Separate package
Custom rules Regex patterns Plugin API

Custom Rules (The Engine Part) 

// Create your own utilities
export default defineConfig({
  rules: [
    // m-1 → margin: 0.25rem
    [/^m-(\d+)$/, ([, d]) => ({ margin: `${Number(d) * 0.25}rem` })],

    // glass → glassmorphism effect
    ["glass", { 
      "backdrop-filter": "blur(10px)",
      "background": "rgba(255,255,255,0.1)",
      "border": "1px solid rgba(255,255,255,0.2)"
    }],
  ],
});
Enter fullscreen mode Exit fullscreen mode

Need to scrape data from any website and get it in structured JSON? Check out my web scraping tools on Apify — no coding required, results in minutes.

Have a custom data extraction project? Email me at spinov001@gmail.com — I build tailored scraping solutions for businesses.

Top comments (0)