unocss▌
antfu/skills · updated Apr 8, 2026
Instant atomic CSS engine with Tailwind CSS compatibility and flexible preset-based architecture.
- ›Superset of Tailwind CSS with un-opinionated core; all utilities provided via presets including Wind3, Wind4, Mini, Icons, Attributify, Typography, and Web Fonts
- ›Supports static and dynamic rules, shortcuts, theming, variants, and CSS layers for fine-grained styling control
- ›Includes transformers for variant grouping, CSS directives (@apply, @screen, theme()), and JSX attributify support
UnoCSS is an instant atomic CSS engine designed to be flexible and extensible. The core is un-opinionated - all CSS utilities are provided via presets. It's a superset of Tailwind CSS, so you can reuse your Tailwind knowledge for basic syntax usage.
Important: Before writing UnoCSS code, agents should check for uno.config.* or unocss.config.* files in the project root to understand what presets, rules, and shortcuts are available. If the project setup is unclear, avoid using attributify mode and other advanced features - stick to basic class usage.
The skill is based on UnoCSS 66.x, generated at 2026-01-28.
Core
| Topic | Description | Reference |
|---|---|---|
| Configuration | Config file setup and all configuration options | core-config |
| Rules | Static and dynamic rules for generating CSS utilities | core-rules |
| Shortcuts | Combine multiple rules into single shorthands | core-shortcuts |
| Theme | Theming system for colors, breakpoints, and design tokens | core-theme |
| Variants | Apply variations like hover:, dark:, responsive to rules | core-variants |
| Extracting | How UnoCSS extracts utilities from source code | core-extracting |
| Safelist & Blocklist | Force include or exclude specific utilities | core-safelist |
| Layers & Preflights | CSS layer ordering and raw CSS injection | core-layers |
Presets
Main Presets
| Topic | Description | Reference |
|---|---|---|
| Preset Wind3 | Tailwind CSS v3 / Windi CSS compatible preset (most common) | preset-wind3 |
| Preset Wind4 | Tailwind CSS v4 compatible preset with modern CSS features | preset-wind4 |
| Preset Mini | Minimal preset with essential utilities for custom builds | preset-mini |
Feature Presets
| Topic | Description | Reference |
|---|---|---|
| Preset Icons | Pure CSS icons using Iconify with any icon set | preset-icons |
| Preset Attributify | Group utilities in HTML attributes instead of class | preset-attributify |
| Preset Typography | Prose classes for typographic defaults | preset-typography |
| Preset Web Fonts | Easy Google Fonts and other web fonts integration | preset-web-fonts |
| Preset Tagify | Use utilities as HTML tag names | preset-tagify |
| Preset Rem to Px | Convert rem units to px for utilities | preset-rem-to-px |
Transformers
| Topic | Description | Reference |
|---|---|---|
| Variant Group | Shorthand for grouping utilities with common prefixes | transformer-variant-group |
| Directives | CSS directives: @apply, @screen, theme(), icon() | transformer-directives |
| Compile Class | Compile multiple classes into one hashed class | transformer-compile-class |
| Attributify JSX | Support valueless attributify in JSX/TSX | transformer-attributify-jsx |
Integrations
| Topic | Description | Reference |
|---|---|---|
| Vite Integration | Setting up UnoCSS with Vite and framework-specific tips | integrations-vite |
| Nuxt Integration | UnoCSS module for Nuxt applications | integrations-nuxt |
Discussion
Product Hunt–style comments (not star reviews)- No comments yet — start the thread.
Ratings
4.6★★★★★59 reviews- ★★★★★Hana Torres· Dec 28, 2024
We added unocss from the explainx registry; install was straightforward and the SKILL.md answered most questions upfront.
- ★★★★★Jin Haddad· Dec 28, 2024
unocss fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.
- ★★★★★Pratham Ware· Dec 24, 2024
Useful defaults in unocss — fewer surprises than typical one-off scripts, and it plays nicely with `npx skills` flows.
- ★★★★★Kabir Srinivasan· Dec 16, 2024
Solid pick for teams standardizing on skills: unocss is focused, and the summary matches what you get after install.
- ★★★★★Hana Sharma· Dec 4, 2024
Registry listing for unocss matched our evaluation — installs cleanly and behaves as described in the markdown.
- ★★★★★Kiara Anderson· Nov 19, 2024
Solid pick for teams standardizing on skills: unocss is focused, and the summary matches what you get after install.
- ★★★★★Kabir Sanchez· Nov 19, 2024
unocss has been reliable in day-to-day use. Documentation quality is above average for community skills.
- ★★★★★Yash Thakker· Nov 15, 2024
unocss is among the better-maintained entries we tried; worth keeping pinned for repeat workflows.
- ★★★★★Kabir Ramirez· Nov 7, 2024
We added unocss from the explainx registry; install was straightforward and the SKILL.md answered most questions upfront.
- ★★★★★Kaira Kapoor· Oct 26, 2024
unocss fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.
showing 1-10 of 59