skilld
All skills
antfu avatar

/unocss

@d02c484 official
by Anthony Fuantfu/skills5.9k stars
335

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.

Ask your Agent

Use this Skill: https://skilld.dev/gh/antfu/skills/unocss

This session only. Nothing lands on disk.

referencestransformer-variant-group.md

≈457 tokens on demand. Your agent reads this file only when SKILL.md points to it.

Transformer Variant Group

Enables shorthand syntax for grouping utilities with common prefixes.

Installation

import { defineConfig, transformerVariantGroup } from 'unocss'

export default defineConfig({
  transformers: [
    transformerVariantGroup(),
  ],
})

Usage

Group multiple utilities under one variant prefix using parentheses:

<!-- Before transformation -->
<div class="hover:(bg-gray-400 font-medium) font-(light mono)" />

<!-- After transformation -->
<div class="hover:bg-gray-400 hover:font-medium font-light font-mono" />

Examples

Hover States

<button class="hover:(bg-blue-600 text-white scale-105)">
  Hover me
</button>

Expands to: hover:bg-blue-600 hover:text-white hover:scale-105

Dark Mode

<div class="dark:(bg-gray-800 text-white)">
  Dark content
</div>

Expands to: dark:bg-gray-800 dark:text-white

Responsive

<div class="md:(flex items-center gap-4)">
  Responsive flex
</div>

Expands to: md:flex md:items-center md:gap-4

Nested Groups

<div class="lg:hover:(bg-blue-500 text-white)">
  Large screen hover
</div>

Expands to: lg:hover:bg-blue-500 lg:hover:text-white

Multiple Prefixes

<div class="text-(sm gray-600) font-(medium mono)">
  Styled text
</div>

Expands to: text-sm text-gray-600 font-medium font-mono

Key Points

  • Use parentheses () to group utilities
  • The prefix applies to all utilities inside the group
  • Can be combined with any variant (hover, dark, responsive, etc.)
  • Nesting is supported
  • Works in class attributes and other extraction sources
<!-- Source references: - https://unocss.dev/transformers/variant-group -->

Source: SKILL.md on GitHub

Third-party checks

No alerts3d5 checks · Risk SAFE
  • Gen Agent Trust Hub3d

    This skill is a documentation-only resource providing configuration guides, presets, and integration instructions for the UnoCSS engine. It contains no executable code or malicious patterns.

  • Socket3d

    No alerts

  • Snyk3d

    Risk: LOW · No issues

  • Runlayer7mo

    1/25 files flagged

  • ZeroLeaks5mo

    Score: 93/100 · 2 sections analyzed

Provenance

Signed by skilld at d02c484. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 2 days ago.

Activeupdated 4 days ago

Capability

Other metadata
metadata
{
  "author": "Anthony Fu",
  "version": "2026.9.25",
  "source": "Generated from https://github.com/unocss/unocss, scripts located at https://github.com/antfu/skills"
}

Topics

  • Nuxt
  • unocss
  • atomic-css
  • tailwind
  • css
  • preset
  • configuration
  • vite

README badge

README badge for antfu/skills/unocss

What it does

Configures and extends UnoCSS, an atomic CSS engine compatible with Tailwind CSS syntax but customizable via presets, rules, shortcuts, and variants. Use this skill when setting up UnoCSS in a project, writing custom utility rules, or integrating presets like Wind, Icons, or Attributify.

Generated from the current SKILL.md.

Frequently asked

Is UnoCSS compatible with Tailwind CSS?
Yes. UnoCSS is a superset of Tailwind CSS, so basic utility syntax from Tailwind works directly. The skill includes Preset Wind3 for Tailwind v3 / Windi CSS compatibility and Preset Wind4 for Tailwind v4 with modern CSS features.
How do I know what utilities and presets are available in a project?
Check for `uno.config.*` or `unocss.config.*` files in the project root to see what presets, rules, and shortcuts are configured. If the project setup is unclear, stick to basic `class` usage and avoid advanced features like attributify mode.
Can I use UnoCSS with Nuxt or Vite?
Yes. The skill includes Vite integration instructions and a Nuxt module for seamless setup in both frameworks.
Does this skill support CSS icons?
Yes, via Preset Icons, which provides pure CSS icons from Iconify with any icon set available.
What version of UnoCSS does this skill cover?
The skill is based on UnoCSS 66.x, generated at 2026-01-28.

Generated from the current SKILL.md. These answers refresh after source changes.