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 [blocked]
Rules	Static and dynamic rules for generating CSS utilities	core-rules [blocked]
Shortcuts	Combine multiple rules into single shorthands	core-shortcuts [blocked]
Theme	Theming system for colors, breakpoints, and design tokens	core-theme [blocked]
Variants	Apply variations like hover:, dark:, responsive to rules	core-variants [blocked]
Extracting	How UnoCSS extracts utilities from source code	core-extracting [blocked]
Safelist & Blocklist	Force include or exclude specific utilities	core-safelist [blocked]
Layers & Preflights	CSS layer ordering and raw CSS injection	core-layers [blocked]

Presets

Main Presets

Topic	Description	Reference
Preset Wind3	Tailwind CSS v3 / Windi CSS compatible preset (most common)	preset-wind3 [blocked]
Preset Wind4	Tailwind CSS v4 compatible preset with modern CSS features	preset-wind4 [blocked]
Preset Mini	Minimal preset with essential utilities for custom builds	preset-mini [blocked]

Feature Presets

Topic	Description	Reference
Preset Icons	Pure CSS icons using Iconify with any icon set	preset-icons [blocked]
Preset Attributify	Group utilities in HTML attributes instead of class	preset-attributify [blocked]
Preset Typography	Prose classes for typographic defaults	preset-typography [blocked]
Preset Web Fonts	Easy Google Fonts and other web fonts integration	preset-web-fonts [blocked]
Preset Tagify	Use utilities as HTML tag names	preset-tagify [blocked]
Preset Rem to Px	Convert rem units to px for utilities	preset-rem-to-px [blocked]

Transformers

Topic	Description	Reference
Variant Group	Shorthand for grouping utilities with common prefixes	transformer-variant-group [blocked]
Directives	CSS directives: @apply, @screen, theme(), icon()	transformer-directives [blocked]
Compile Class	Compile multiple classes into one hashed class	transformer-compile-class [blocked]
Attributify JSX	Support valueless attributify in JSX/TSX	transformer-attributify-jsx [blocked]

Integrations

Topic	Description	Reference
Vite Integration	Setting up UnoCSS with Vite and framework-specific tips	integrations-vite [blocked]
Nuxt Integration	UnoCSS module for Nuxt applications	integrations-nuxt [blocked]