Setting the skill. One moment.
Skills
Skill 10 of 19
UnoCSS instant atomic CSS engine, superset of Tailwind CSS. Use when configuring UnoCSS, writing utility rules, shortcuts, or working with presets like Wind, Icons, Attributify.
1 minute · 328 words · 6 sections
Install
npx skills add antfu/skills --skill unocssnpx skills add antfu/skillsThe first command installs just this skill, by the name in its SKILL.md; the second installs the whole repository.
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.
| Topic | Description | Reference |
|---|---|---|
| Configuration | Config file setup and all configuration options | core-config (opens in a new tab) |
| Rules | Static and dynamic rules for generating CSS utilities | core-rules (opens in a new tab) |
| Shortcuts | Combine multiple rules into single shorthands | core-shortcuts (opens in a new tab) |
| Theme | Theming system for colors, breakpoints, and design tokens | core-theme (opens in a new tab) |
| Variants | Apply variations like hover:, dark:, responsive to rules | core-variants (opens in a new tab) |
| Extracting | How UnoCSS extracts utilities from source code | core-extracting (opens in a new tab) |
| Safelist & Blocklist | Force include or exclude specific utilities | core-safelist (opens in a new tab) |
| Layers & Preflights | CSS layer ordering and raw CSS injection | core-layers (opens in a new tab) |
| Topic | Description | Reference |
|---|---|---|
| Preset Wind3 | Tailwind CSS v3 / Windi CSS compatible preset (most common) | preset-wind3 (opens in a new tab) |
| Preset Wind4 | Tailwind CSS v4 compatible preset with modern CSS features | preset-wind4 (opens in a new tab) |
| Preset Mini | Minimal preset with essential utilities for custom builds | preset-mini (opens in a new tab) |
| Topic | Description | Reference |
|---|---|---|
| Preset Icons | Pure CSS icons using Iconify with any icon set | preset-icons (opens in a new tab) |
| Preset Attributify | Group utilities in HTML attributes instead of class | preset-attributify (opens in a new tab) |
| Preset Typography | Prose classes for typographic defaults | preset-typography (opens in a new tab) |
| Preset Web Fonts | Easy Google Fonts and other web fonts integration | preset-web-fonts (opens in a new tab) |
| Preset Tagify | Use utilities as HTML tag names | preset-tagify (opens in a new tab) |
| Preset Rem to Px | Convert rem units to px for utilities | preset-rem-to-px (opens in a new tab) |
| Topic | Description | Reference |
|---|---|---|
| Variant Group | Shorthand for grouping utilities with common prefixes | transformer-variant-group (opens in a new tab) |
| Directives | CSS directives: @apply, @screen, theme(), icon() | transformer-directives (opens in a new tab) |
| Compile Class | Compile multiple classes into one hashed class | transformer-compile-class (opens in a new tab) |
| Attributify JSX | Support valueless attributify in JSX/TSX | transformer-attributify-jsx (opens in a new tab) |
| Topic | Description | Reference |
|---|---|---|
| Vite Integration | Setting up UnoCSS with Vite and framework-specific tips | integrations-vite (opens in a new tab) |
| Nuxt Integration | UnoCSS module for Nuxt applications | integrations-nuxt (opens in a new tab) |
main, last pushed 23 June 2026.SKILL.md, not by matching a directory convention. One layout observed: skills/*/SKILL.md./antfu/skills.md, and each skill at its own .md URL.24 files · 60 KB
Everything this skill ships beside its prose. All of it is set here, as subchapters of skill 10.
Documentation the agent loads on demand, rather than up front.
Everything else published alongside the skill.