Features
- Instant on-demand generation with no parsing
- Fully customizable with preset system
- Tailwind/Windi CSS compatible preset
- Attributify mode for cleaner markup
- Pure CSS icons with any icon set
Pros
- Fastest atomic CSS engine available
- Highly extensible preset and rule system
- Compatible with Tailwind syntax via presets
- Built-in icon support without JavaScript
Cons
- Smaller community than Tailwind CSS
- Less documentation and learning resources
- Requires understanding preset system for customization
Overview
UnoCSS is an instant, on-demand atomic CSS engine created by Anthony Fu. Unlike traditional CSS frameworks that ship a predefined set of utilities, UnoCSS generates CSS rules on demand based on what you use, with no parsing step — making it extremely fast.
UnoCSS is not a framework but an engine. It provides a core that generates CSS from rules and presets. The @unocss/preset-wind preset provides Tailwind/Windi CSS compatibility, while other presets add features like attributify mode (using HTML attributes instead of classes), typography, web fonts, and pure CSS icons.
When to Use
UnoCSS is the right choice when you want the fastest atomic CSS generation, when you need more flexibility than Tailwind provides, or when you want features like attributify mode and CSS icons. It’s ideal for developers who appreciate a highly configurable, engine-first approach.
Getting Started
npm install -D unocss<!-- With default Wind preset (Tailwind-compatible) -->
<div class="flex items-center gap-4 p-6 rounded-lg shadow-lg">
<h2 class="text-xl font-bold">Hello, UnoCSS!</h2>
</div>
<!-- With attributify mode -->
<div flex items-center gap-4 p-6 rounded-lg shadow-lg>
<h2 text="xl" font="bold">Hello, UnoCSS!</h2>
</div>