The instant on-demand Atomic CSS engine.
UnoCSS is an atomic CSS engine that generates utility classes on-demand based on what you actually use in your codebase. Unlike traditional CSS frameworks that ship thousands of pre-generated classes, UnoCSS scans your source files and creates only the CSS rules you need, resulting in minimal bundle sizes and instant build times.
The core philosophy is un-opinionated flexibility. UnoCSS itself provides no utilities out of the box—everything comes from presets. You can use official presets like presetUno (Tailwind/Windi-compatible utilities), presetIcons (CSS-only icons from any icon set), or build completely custom design systems with your own rules and naming conventions. This makes it ideal for teams that need full control over their utility class APIs.
Developed as a successor to Windi CSS, UnoCSS takes the on-demand concept further with features like attributify mode (write utilities as HTML attributes), variant groups, shortcuts for reusable class combinations, and transformers for framework-specific syntax. It integrates deeply with build tools like Vite, Webpack, and Rsbuild, providing HMR support and a visual inspector for debugging generated styles.
The package is used by teams building custom design systems, component libraries, or applications where bundle size and build performance are critical. Its extensibility makes it suitable for both small projects needing a few utilities and large-scale applications with complex styling requirements.
// uno.config.ts
import { defineConfig, presetUno, presetAttributify, presetIcons } from 'unocss';
export default defineConfig({
presets: [
presetUno(), // Tailwind-like utilities
presetAttributify(), // Enable attribute mode
presetIcons({ scale: 1.2, cdn: 'https://esm.sh/' })
],
rules: [
// Static custom utility
['btn-primary', { 'background': '#3b82f6', 'color': 'white', 'padding': '0.5rem 1rem', 'border-radius': '0.375rem' }],
// Dynamic utility with regex
[/^slide-(.+)$/, ([, d]) => ({ transform: `translateX(${d})` })]
],
shortcuts: [
// Reusable class combination
{ 'card': 'bg-white rounded-lg shadow-md p-6' }
],
theme: {
colors: {
brand: { primary: '#3b82f6', secondary: '#8b5cf6' }
}
}
});
// index.html - Using generated utilities
// <div class="card text-brand-primary slide-10px">
// <button class="btn-primary">Click me</button>
// <i class="i-carbon-email text-2xl"></i>
// </div>
// With attributify mode:
// <div card text-brand-primary slide-10px>
// <button btn-primary>Click me</button>
// </div>
// vite.config.ts
import UnoCSS from 'unocss/vite';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [UnoCSS()]
});Custom design system implementation: Define your own utility naming conventions and spacing scales without fighting framework defaults. Create rules like spacing-small, color-brand-primary that match your design tokens exactly, using static mappings or dynamic regex patterns.
Multi-framework component library: Share a single UnoCSS config across React, Vue, and Svelte components. Use the CLI to extract utilities from component source files and generate standalone CSS bundles that work independently of any framework.
Icon-heavy applications: Use @unocss/preset-icons to embed thousands of icons from Iconify collections as pure CSS (no SVG files or font loading). Reference icons with classes like i-carbon-email and UnoCSS fetches and inlines them automatically during build.
Performance-critical SPAs: Replace large CSS frameworks with on-demand generation. Scan only the routes and components actually rendered, producing <10KB CSS files even for complex applications. Deep HMR integration updates styles instantly without full page reloads.
Prototyping with attributify mode: Write HTML with utility attributes like <div bg-blue-500 p-4 rounded> instead of long class strings. Use @unocss/transformer-attributify-jsx to enable this syntax in React components while maintaining type safety.
npm install unocsspnpm add unocssbun add unocss