Unocss

Anthony FuCommunityCreated by Anthony Fu

Skill
Tool integration
Software development
MIT
No issues found

From the author

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.

— the description by Anthony Fu

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

UnoCSS is an instant, atomic CSS engine that provides a highly flexible and extensible approach to styling. Unlike traditional CSS frameworks, it is un-opinionated and relies on presets to provide utility classes. It serves as a superset of Tailwind CSS, allowing developers to leverage existing knowledge while benefiting from advanced features like custom rules, shortcuts, and various integration presets. The engine operates by extracting utility classes from source files at build time to generate CSS on-demand, ensuring minimal bundle sizes.

What it does

Generates atomic CSS utilities on-demand based on project configuration.
Supports custom utility rules, shortcuts, and design tokens via a central configuration file.
Provides modular presets for features like icons, typography, web fonts, and attributify mode.
Integrates with build tools like Vite and frameworks like Nuxt for seamless development.
Allows fine-grained control over CSS generation through safelists, blocklists, and custom extractors.
Supports code transformation features like variant grouping and CSS directives.

When to use it

When you need a highly customizable and performant CSS solution for modern web applications.
When you want to use Tailwind-like syntax but require more flexibility or specific custom utilities.
When you need to integrate specialized features like Iconify icons or custom web fonts directly into your CSS workflow.
When you are working in a Vite or Nuxt environment and want optimized, build-time CSS generation.

Advantages

Extremely fast, on-demand CSS generation.
Highly extensible architecture through presets and custom rules.
Compatible with Tailwind CSS syntax.
Reduces CSS bundle size by only generating what is actually used.
Offers powerful configuration options for complex design systems.

Usage examples

“How do I define a custom shortcut in UnoCSS?”: You can add a 'shortcuts' object to your 'uno.config.ts' file, mapping a shorthand name to a string of utility classes, such as 'btn': 'py-2 px-4 rounded'.
“How can I ensure specific utility classes are always included in my build?”: Add the required classes to the 'safelist' array within your 'uno.config.ts' file to force UnoCSS to include them regardless of whether they are found in the source code.
“How do I add a custom rule for a specific margin value?”: In your 'uno.config.ts', add an entry to the 'rules' array, such as ['m-custom', { margin: '13px' }], to generate a new utility class.
“How do I enable attributify mode in my project?”: Install the 'preset-attributify' package and add 'presetAttributify()' to the 'presets' array in your 'uno.config.ts' file.

Install

Download the skill as a ZIP:
https://autogineer.com/agent-skills/antfu/unocss/download
Unzip it into the cross-client skills folder of your project:
```
mkdir -p .agents/skills && unzip unocss.zip -d .agents/skills
```

Documentation by Anthony Fu

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

Files

ATTRIBUTION.mdAdded by AutoGineer895 B
GENERATION.md136 B
LICENSELicence file added by AutoGineer1.1 KiB
SKILL.md4.3 KiB
references/core-config.md3.1 KiB
references/core-extracting.md2.1 KiB
references/core-layers.md1.6 KiB
references/core-processors.md2.7 KiB
references/core-rules.md3.6 KiB
references/core-safelist.md4.0 KiB
references/core-shortcuts.md1.9 KiB
references/core-theme.md3.0 KiB
references/core-variants.md3.2 KiB
references/integrations-nuxt.md3.3 KiB
references/integrations-vite.md4.4 KiB
references/preset-attributify.md2.5 KiB
references/preset-icons.md3.7 KiB
references/preset-mini.md2.7 KiB
references/preset-rem-to-px.md1.6 KiB
references/preset-tagify.md2.0 KiB
references/preset-typography.md1.7 KiB
references/preset-web-fonts.md2.4 KiB
references/preset-wind3.md3.3 KiB
references/preset-wind4.md4.6 KiB
references/transformer-attributify-jsx.md2.5 KiB
references/transformer-compile-class.md2.2 KiB
references/transformer-directives.md2.5 KiB
references/transformer-variant-group.md1.8 KiB

references/preset-wind4.md

name: preset-wind4 description: Tailwind CSS v4 compatible preset with enhanced features

Preset Wind4

The Tailwind CSS v4 compatible preset. Enhances preset-wind3 with modern CSS features.

Installation

import { defineConfig, presetWind4 } from 'unocss'

export default defineConfig({
  presets: [
    presetWind4(),
  ],
})

Key Differences from Wind3

Built-in CSS Reset

No need for @unocss/reset - reset is built-in:

// Remove these imports
import '@unocss/reset/tailwind.css' // ❌ Not needed
import '@unocss/reset/tailwind-compat.css' // ❌ Not needed

// Enable in config
presetWind4({
  preflights: {
    reset: true,
  },
})

OKLCH Color Model

Uses oklch for better color perception and contrast. Not compatible with presetLegacyCompat.

Theme CSS Variables

Automatically generates CSS variables from theme:

:root, :host {
  --spacing: 0.25rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --colors-black: #000;
  --colors-white: #fff;
  /* ... */
}

@property CSS Rules

Uses @property for better browser optimization:

@property --un-text-opacity {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 100%;
}

Theme Key Changes

preset-wind3	preset-wind4
`fontFamily`	`font`
`fontSize`	`text.fontSize`
`lineHeight`	`text.lineHeight` or `leading`
`letterSpacing`	`text.letterSpacing` or `tracking`
`borderRadius`	`radius`
`easing`	`ease`
`breakpoints`	`breakpoint`
`verticalBreakpoints`	`verticalBreakpoint`
`boxShadow`	`shadow`
`transitionProperty`	`property`
`container.maxWidth`	`containers.maxWidth`
Size properties (`width`, `height`, etc.)	Unified to `spacing`

Options

presetWind4({
  preflights: {
    // Built-in reset styles
    reset: true,
    
    // Theme CSS variables generation
    theme: 'on-demand', // true | false | 'on-demand'
    
    // @property CSS rules
    property: true,
  },
})

Theme Variable Processing

Convert rem to px for theme variables:

import { createRemToPxProcessor } from '@unocss/preset-wind4/utils'

presetWind4({
  preflights: {
    theme: {
      mode: 'on-demand',
      process: createRemToPxProcessor(),
    }
  },
})

// Also apply to utilities
export default defineConfig({
  postprocess: [createRemToPxProcessor()],
})

Property Layer Customization

presetWind4({
  preflights: {
    property: {
      // Custom parent wrapper
      parent: '@layer custom-properties',
      // Custom selector
      selector: ':where(*, ::before, ::after)',
    },
  },
})

Remove @supports wrapper:

presetWind4({
  preflights: {
    property: {
      parent: false,
    },
  },
})

Generated Layers

Layer	Description	Order
`properties`	CSS `@property` rules	-200
`theme`	Theme CSS variables	-150
`base`	Reset/preflight styles	-100

Theme.defaults

Global default configuration for reset styles:

import type { Theme } from '@unocss/preset-wind4/theme'

const defaults: Theme['default'] = {
  transition: {
    duration: '150ms',
    timingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
  },
  font: {
    family: 'var(--font-sans)',
    featureSettings: 'var(--font-sans--font-feature-settings)',
    variationSettings: 'var(--font-sans--font-variation-settings)',
  },
  monoFont: {
    family: 'var(--font-mono)',
    // ...
  },
}

Compatibility Notes

presetRemToPx

Not needed - use built-in processor instead:

presetWind4({
  preflights: {
    theme: {
      process: createRemToPxProcessor(),
    }
  },
})

presetLegacyCompat

Not compatible with preset-wind4 due to oklch color model.

Migration from Wind3

Update theme keys according to the table above
Remove @unocss/reset imports
Enable preflights.reset: true
Test color outputs (oklch vs rgb)
Update any custom theme extensions

// Before (wind3)
theme: {
  fontFamily: { sans: 'Roboto' },
  fontSize: { lg: '1.125rem' },
  breakpoints: { sm: '640px' },
}

// After (wind4)
theme: {
  font: { sans: 'Roboto' },
  text: { lg: { fontSize: '1.125rem' } },
  breakpoint: { sm: '640px' },
}

When to Use Wind4

Choose preset-wind4 when:

Starting a new project
Targeting modern browsers
Want built-in reset and CSS variables
Following Tailwind v4 conventions

Choose preset-wind3 when:

Need legacy browser support
Migrating from Tailwind v3
Using presetLegacyCompat
Want stable, proven preset

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by

Anthony Fu

Publisher

Anthony Fu (Community)

Source

antfu/skills · skills/unocss · commit f63e9ec

Licence

MIT License (redistribution allowed)

LICENSE (added by AutoGineer from LICENSE.md)
ATTRIBUTION.md (written by AutoGineer)

Synced

2026-11-09

AutoGineer is not affiliated with or endorsed by Anthony Fu or Anthony Fu.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download unocss.zip