UnoCSS — Instant On-Demand Atomic CSS Engine

What it is

UnoCSS is an instant on-demand atomic CSS engine inspired by Tailwind CSS and Windi CSS. Rather than shipping a fixed set of utility classes, UnoCSS generates only the CSS you actually use, at build time, with sub-millisecond performance. It is fully customizable through presets -- you can use Tailwind-compatible classes, Bootstrap-like utilities, or define your own from scratch.

Frontend developers who want atomic CSS with maximum flexibility and minimal build overhead benefit most. UnoCSS works with Vite, Webpack, Nuxt, Next.js, Astro, and other modern build tools.

How it saves time or tokens

UnoCSS scans your source files and generates only the CSS rules that match classes you use. There is no purging step, no large CSS file to ship, and no unused styles. The on-demand approach means the CSS output is always minimal. Build times are sub-millisecond because UnoCSS uses a single-pass regex-based engine rather than a full CSS parser. Hot module replacement is instant in development.

How to use

1. Install UnoCSS with Vite:

npm install -D unocss

1. Add to your Vite config:

import UnoCSS from 'unocss/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [UnoCSS()]
});

1. Import UnoCSS in your entry file and start using utility classes:

import 'virtual:uno.css';

<div class="flex items-center gap-4 p-6 bg-blue-500 text-white rounded-lg">
  <h1 class="text-2xl font-bold">Hello UnoCSS</h1>
</div>

Example

// uno.config.ts - Custom rules and shortcuts
import { defineConfig, presetUno, presetAttributify } from 'unocss';

export default defineConfig({
  presets: [
    presetUno(),           // Tailwind-compatible utilities
    presetAttributify()    // Use utilities as HTML attributes
  ],
  shortcuts: {
    'btn': 'px-4 py-2 rounded-lg bg-blue-500 text-white hover:bg-blue-600',
    'card': 'p-6 bg-white rounded-xl shadow-md'
  },
  rules: [
    ['custom-grid', { display: 'grid', 'grid-template-columns': 'repeat(auto-fit, minmax(200px, 1fr))' }]
  ]
});

Related on TokRepo

• AI Coding Tools -- Frontend developer utilities on TokRepo
• Design Tools -- UI and design resources for web development

Common pitfalls

• UnoCSS is not a drop-in Tailwind replacement. While presetUno covers most Tailwind utilities, some Tailwind plugins and features may not have direct equivalents. Check preset compatibility before migrating.
• Dynamic class names constructed at runtime (e.g., bg-${color}-500) are not detected by the scanner. Use safelist or explicit class lists for dynamic values.
• The attributify preset conflicts with some HTML attributes. Test thoroughly if you enable it alongside component libraries that use custom attributes.