unocss
antfu/skills
Instant atomic CSS engine with Tailwind compatibility and flexible preset system.
What is unocss?
UnoCSS is a fast, un-opinionated atomic CSS engine that extends Tailwind CSS with presets for icons, typography, web fonts, and more. Use it to configure utility rules, shortcuts, themes, and variants in modern web projects.
- Generate atomic CSS utilities via flexible preset system
- Support Tailwind CSS v3/v4 syntax with Wind presets
- Compose utilities into shortcuts and custom rules
- Apply variants (hover, dark, responsive) to any rule
- Extract utilities from source code with safelist/blocklist control
- Integrate with Vite and Nuxt for automatic CSS generation
How to install unocss
npx skills add https://github.com/antfu/skills --skill unocss- Node.js and npm/yarn/pnpm installed
- Vite or Nuxt project (or compatible build tool)
- uno.config.ts or unocss.config.ts file in project root
How to use unocss
- 1.Check for uno.config.* or unocss.config.* in project root to understand available presets and rules
- 2.Choose a preset (Wind3 for Tailwind v3, Wind4 for v4, or Mini for minimal setup)
- 3.Define custom rules, shortcuts, and theme tokens in the config file
- 4.Use utility classes in HTML class attributes or enable attributify mode for attribute-based syntax
- 5.Apply variants (hover:, dark:, sm:, etc.) to utilities as needed
- 6.Run build or dev server to generate CSS automatically
Use cases
- Configure UnoCSS in a Vite or Nuxt project with custom presets and theme tokens
- Write custom utility rules and shortcuts in uno.config.ts for project-specific styling
- Add icon fonts using preset-icons without external image assets
- Apply responsive and state variants to utilities for adaptive layouts
- Convert Tailwind CSS projects to UnoCSS by switching presets
- Frontend developers building modern web applications
- Teams migrating from Tailwind CSS to a more flexible system
- Developers needing icon integration without asset files
- Projects using Vite or Nuxt that want instant CSS generation
unocss FAQ
UnoCSS is a superset of Tailwind with a flexible, un-opinionated core. All utilities come from presets, allowing custom rules and shortcuts. It's faster and more extensible, but requires explicit preset configuration.
Use Preset Wind3 for Tailwind v3 compatibility (most common), Wind4 for Tailwind v4 with modern CSS, or Mini for minimal custom builds. Combine with feature presets like Icons, Attributify, or Typography as needed.
Define static or dynamic rules in the config file's rules array. Static rules use regex patterns; dynamic rules use functions to generate CSS based on matched class names.
Yes. UnoCSS is a superset of Tailwind syntax. Start with Preset Wind3 or Wind4 and gradually add custom rules and presets as needed.
Attributify mode lets you group utilities in HTML attributes instead of class strings, e.g., `<div bg="blue-500" p="4">` instead of `class="bg-blue-500 p-4"`. Enable via preset-attributify.
Full instructions (SKILL.md)
Source of truth, from antfu/skills.
name: unocss description: 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. metadata: author: Anthony Fu version: "2026.1.28" source: Generated from https://github.com/unocss/unocss, scripts located at https://github.com/antfu/skills
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 |
Related skills
More from antfu/skills and the wider catalog.
vite
Next-generation frontend build tool with fast dev server and optimized production builds.
vue
Vue 3 Composition API with script setup, reactivity, and built-in components for modern SFCs.
vitest
Jest-compatible unit testing framework powered by Vite with native ESM, TypeScript, and JSX support.
vue-best-practices
Vue 3 best practices guide: Composition API, TypeScript, and component architecture for maintainable applications.
nuxt
Full-stack Vue framework with SSR, file-based routing, auto-imports, and universal deployment via Nitro.
vueuse-functions
Apply VueUse composables to build concise, maintainable Vue.js and Nuxt features.