UnoCSS Shortcuts

Shortcuts combine multiple rules into a single shorthand, inspired by Windi CSS.

Static Shortcuts

Define as an object mapping shortcut names to utility combinations:

shortcuts: {
  // Multiple utilities combined
  'btn': 'py-2 px-4 font-semibold rounded-lg shadow-md',
  'btn-green': 'text-white bg-green-500 hover:bg-green-700',
  // Single utility alias
  'red': 'text-red-100',
}

Usage:

html

<button class="btn btn-green">Click me</button>

Dynamic Shortcuts

Use RegExp matcher with function, similar to dynamic rules:

shortcuts: [
  // Static shortcuts can be in array too
  {
    btn: 'py-2 px-4 font-semibold rounded-lg shadow-md',
  },
  // Dynamic shortcut
  [/^btn-(.*)$/, ([, c]) => `bg-${c}-400 text-${c}-100 py-2 px-4 rounded-lg`],
]

Now btn-green and btn-red generate:

css

.btn-green {
  padding: 0.5rem 1rem;
  --un-bg-opacity: 1;
  background-color: rgb(74 222 128 / var(--un-bg-opacity));
  border-radius: 0.5rem;
  --un-text-opacity: 1;
  color: rgb(220 252 231 / var(--un-text-opacity));
}

Accessing Theme in Shortcuts

Dynamic shortcuts receive context with theme access:

shortcuts: [
  [/^badge-(.*)$/, ([, c], { theme }) => {
    if (Object.keys(theme.colors).includes(c))
      return `bg-${c}4:10 text-${c}5 rounded`
  }],
]

Shortcuts Layer

Shortcuts are output to the shortcuts layer by default. Configure with:

shortcutsLayer: 'my-shortcuts-layer'

Key Points

Later shortcuts have higher priority
Shortcuts can reference other shortcuts
Dynamic shortcuts work like dynamic rules
Shortcuts are expanded at build time, not runtime
All variants work with shortcuts (hover:btn, dark:btn, etc.)