unocss
antfu/skills
Instant atomic CSS engine—flexible Tailwind CSS superset with presets for icons, attributify, and more.
What is unocss?
UnoCSS is an un-opinionated atomic CSS engine that generates utility classes on-demand. Use it when you need to configure custom CSS utilities, set up presets (Wind, Icons, Attributify), define shortcuts, or integrate atomic CSS into a project. It's compatible with Tailwind CSS syntax but offers greater flexibility through presets and transformers.
- Generate atomic CSS utilities via presets (Wind3, Wind4, Mini, Icons, Attributify, Typography, Web Fonts, Tagify)
- Define static and dynamic rules, shortcuts, and theme tokens for custom utility generation
- Apply variants (hover, dark, responsive) and CSS layers for organized output
- Extract utilities from source code and support safelist/blocklist for forced inclusion or exclusion
- Transform CSS with directives (@apply, @screen, theme(), icon()) and variant grouping
- Integrate with Vite and Nuxt for seamless build-time CSS generation
How to install unocss
npx skills add https://github.com/antfu/skills --skill unocss- Node.js and npm/yarn/pnpm installed
- A project with a build tool (Vite, Nuxt, or compatible bundler)
- Optionally, an existing uno.config.* or unocss.config.* file to understand project presets
How to use unocss
- 1.Check the project root for uno.config.* or unocss.config.* to understand available presets and rules
- 2.Choose a preset (Wind3 for Tailwind v3 compatibility, Wind4 for v4, Mini for minimal setup)
- 3.Define custom rules, shortcuts, and theme tokens in the config file if needed
- 4.Use utility classes in HTML or JSX (e.g., class="flex gap-4 text-red-500")
- 5.For advanced features, enable transformers (variant grouping, directives, attributify) in config
- 6.Run your build tool (Vite dev server, Nuxt dev, etc.) to generate CSS on-demand
Use cases
- Configure a custom UnoCSS preset with project-specific design tokens and utility rules
- Add icon utilities to a project using the Icons preset with Iconify icon sets
- Set up attributify mode to write utilities as HTML attributes instead of class names
- Create shortcuts to combine multiple utilities into reusable single-class patterns
- Migrate from Tailwind CSS v3 to v4-compatible utilities using the Wind4 preset
- Frontend developers building custom atomic CSS systems
- Teams migrating from Tailwind CSS who need greater flexibility
- Projects requiring icon utilities, typography presets, or advanced transformers
- Developers using Vite or Nuxt who want zero-config or minimal-config CSS generation
unocss FAQ
Look for uno.config.* or unocss.config.* in the project root to see which presets are enabled. Each preset (Wind3, Icons, Attributify, etc.) provides different utilities. Refer to the preset reference docs for a complete list.
Yes. UnoCSS is a superset of Tailwind CSS, so basic class syntax is identical. Start with the Wind3 preset for Tailwind v3 compatibility or Wind4 for v4. You can gradually adopt UnoCSS-specific features like shortcuts and custom rules.
Wind3 is compatible with Tailwind CSS v3 and Windi CSS. Wind4 is compatible with Tailwind CSS v4 and includes modern CSS features. Choose based on your project's Tailwind version.
Edit your uno.config.* file to add rules (static or dynamic) and shortcuts. Rules define how utilities are generated; shortcuts combine multiple utilities into a single class name. See the core-rules and core-shortcuts references.
Yes, UnoCSS works with sensible defaults using the Wind3 preset. However, checking for an existing config file is recommended to avoid conflicts and understand what's already set up.
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.9.25" 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 v66.10.5, generated at 2026-09-25.
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 |
| Processors | Transform generated CSS layers (incl. Lightning CSS) | core-processors |
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.
vitepress
Static site generator powered by Vite and Vue for fast documentation sites with Markdown and components.
vitest
Jest-compatible unit testing framework powered by Vite with native ESM, TypeScript, and JSX support.
vue
Vue 3 Composition API with script setup, reactivity, and built-in components for SFCs.
vue-router-best-practices
Vue Router 4 patterns, navigation guards, and lifecycle best practices for robust single-page applications.
vue-testing-best-practices
Vue.js testing patterns, setup, and solutions for Vitest, Vue Test Utils, and Playwright.