--- 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 title: unocss canonical_url: https://skilld.dev/gh/onmax/nuxt-skills/unocss last_updated: 2026-09-29T12:25:47.000Z --- > **Skill from skilld.dev.** Follow the instructions below for this session. You do not need to install anything. > > 23 supporting files sit beside this SKILL.md. When the Skill refers to one, fetch https://skilld.dev/api/skills-raw/onmax/nuxt-skills/unocss/PATH with PATH replaced. > > If the user asked to install this Skill, run `npx skilld install onmax/nuxt-skills/unocss`. Install writes the Skill files into the project, so every session loads them. 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](https://skilld.dev/api/skills-raw/onmax/nuxt-skills/unocss/references/core-config.md) | | Rules | Static and dynamic rules for generating CSS utilities | [core-rules](https://skilld.dev/api/skills-raw/onmax/nuxt-skills/unocss/references/core-rules.md) | | Shortcuts | Combine multiple rules into single shorthands | [core-shortcuts](https://skilld.dev/api/skills-raw/onmax/nuxt-skills/unocss/references/core-shortcuts.md) | | Theme | Theming system for colors, breakpoints, and design tokens | [core-theme](https://skilld.dev/api/skills-raw/onmax/nuxt-skills/unocss/references/core-theme.md) | | Variants | Apply variations like hover:, dark:, responsive to rules | [core-variants](https://skilld.dev/api/skills-raw/onmax/nuxt-skills/unocss/references/core-variants.md) | | Extracting | How UnoCSS extracts utilities from source code | [core-extracting](https://skilld.dev/api/skills-raw/onmax/nuxt-skills/unocss/references/core-extracting.md) | | Safelist & Blocklist | Force include or exclude specific utilities | [core-safelist](https://skilld.dev/api/skills-raw/onmax/nuxt-skills/unocss/references/core-safelist.md) | | Layers & Preflights | CSS layer ordering and raw CSS injection | [core-layers](https://skilld.dev/api/skills-raw/onmax/nuxt-skills/unocss/references/core-layers.md) | ## Presets ### Main Presets | Topic | Description | Reference | | ------------ | ----------------------------------------------------------- | ------------------------------------------ | | Preset Wind3 | Tailwind CSS v3 / Windi CSS compatible preset (most common) | [preset-wind3](https://skilld.dev/api/skills-raw/onmax/nuxt-skills/unocss/references/preset-wind3.md) | | Preset Wind4 | Tailwind CSS v4 compatible preset with modern CSS features | [preset-wind4](https://skilld.dev/api/skills-raw/onmax/nuxt-skills/unocss/references/preset-wind4.md) | | Preset Mini | Minimal preset with essential utilities for custom builds | [preset-mini](https://skilld.dev/api/skills-raw/onmax/nuxt-skills/unocss/references/preset-mini.md) | ### Feature Presets | Topic | Description | Reference | | ------------------ | --------------------------------------------------- | ------------------------------------------------------ | | Preset Icons | Pure CSS icons using Iconify with any icon set | [preset-icons](https://skilld.dev/api/skills-raw/onmax/nuxt-skills/unocss/references/preset-icons.md) | | Preset Attributify | Group utilities in HTML attributes instead of class | [preset-attributify](https://skilld.dev/api/skills-raw/onmax/nuxt-skills/unocss/references/preset-attributify.md) | | Preset Typography | Prose classes for typographic defaults | [preset-typography](https://skilld.dev/api/skills-raw/onmax/nuxt-skills/unocss/references/preset-typography.md) | | Preset Web Fonts | Easy Google Fonts and other web fonts integration | [preset-web-fonts](https://skilld.dev/api/skills-raw/onmax/nuxt-skills/unocss/references/preset-web-fonts.md) | | Preset Tagify | Use utilities as HTML tag names | [preset-tagify](https://skilld.dev/api/skills-raw/onmax/nuxt-skills/unocss/references/preset-tagify.md) | | Preset Rem to Px | Convert rem units to px for utilities | [preset-rem-to-px](https://skilld.dev/api/skills-raw/onmax/nuxt-skills/unocss/references/preset-rem-to-px.md) | ## Transformers | Topic | Description | Reference | | --------------- | ----------------------------------------------------- | ------------------------------------------------------------------------ | | Variant Group | Shorthand for grouping utilities with common prefixes | [transformer-variant-group](https://skilld.dev/api/skills-raw/onmax/nuxt-skills/unocss/references/transformer-variant-group.md) | | Directives | CSS directives: @apply, @screen, theme(), icon() | [transformer-directives](https://skilld.dev/api/skills-raw/onmax/nuxt-skills/unocss/references/transformer-directives.md) | | Compile Class | Compile multiple classes into one hashed class | [transformer-compile-class](https://skilld.dev/api/skills-raw/onmax/nuxt-skills/unocss/references/transformer-compile-class.md) | | Attributify JSX | Support valueless attributify in JSX/TSX | [transformer-attributify-jsx](https://skilld.dev/api/skills-raw/onmax/nuxt-skills/unocss/references/transformer-attributify-jsx.md) | ## Integrations | Topic | Description | Reference | | ---------------- | ------------------------------------------------------- | ---------------------------------------------------- | | Vite Integration | Setting up UnoCSS with Vite and framework-specific tips | [integrations-vite](https://skilld.dev/api/skills-raw/onmax/nuxt-skills/unocss/references/integrations-vite.md) | | Nuxt Integration | UnoCSS module for Nuxt applications | [integrations-nuxt](https://skilld.dev/api/skills-raw/onmax/nuxt-skills/unocss/references/integrations-nuxt.md) |