unocss
npx machina-cli add skill antfu/skills/unocss --openclawUnoCSS 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 |
Overview
UnoCSS is an instant atomic CSS engine designed to be flexible and extensible. The core is un-opinionated, with utilities provided via presets such as Wind, Icons, and Attributify, allowing you to tailor utilities to your project. It is a superset of Tailwind CSS, so you can reuse Tailwind syntax while benefiting from UnoCSSs extensibility.
How This Skill Works
UnoCSS generates CSS utilities from rules supplied by presets and any custom rules or shortcuts you define. Start by checking for uno.config.* or unocss.config.* in the project root to see which presets and rules are available. The system is unopinionated by design; presets supply utilities, theming, and variants, while you compose your own rules and shortcuts as needed.
When to Use It
- Starting a new UI project and leveraging Tailwind-like syntax via Wind presets.
- Building a design system with tokens, themes, and layer order using core features.
- Prototyping interfaces quickly with Iconify-based icons through preset-icons.
- Creating reusable UI blocks by defining shortcuts that combine multiple utilities.
- Using Attributify mode when your project styles via HTML attributes, not just class names.
Quick Start
- Step 1: Install UnoCSS and create a config file (uno.config.ts) enabling a preset like Wind3 or Wind4.
- Step 2: Use basic utilities in your HTML (e.g., class='p-4 bg-blue-500 text-white') or add a simple shortcut in the config.
- Step 3: Start the dev server and verify generated CSS, adjusting presets and rules as needed.
Best Practices
- Check for uno.config.* or unocss.config.* in the project root before coding to understand presets and rules.
- Prefer built-in presets (Wind, Icons, Attributify, Typography) to keep maintenance simple.
- Define a few concise shortcuts to replace long class strings and improve consistency.
- Use variants (hover:, focus:, responsive) to manage state and breakpoints instead of duplicating rules.
- If you are unsure about Attributify, disable attributify mode and stick to traditional class-based usage.
Example Use Cases
- Prototype a responsive card layout with Wind presets using simple width, padding, and color utilities.
- Define a btn shortcut to style buttons with padding, rounded corners, and hover color changes.
- Render a navigation bar with preset-icons for icons and hover states.
- Apply Typography presets to establish a readable typographic scale across headings and body text.
- Style components with Attributify attributes like p='4' m='2' and bg='blue-500' to test attribute-based styling.
