1---
2name: unocss-shortcuts
3description: Combine multiple utility rules into single shorthand classes
4---
5 
6# UnoCSS Shortcuts
7 
8Shortcuts combine multiple rules into a single shorthand, inspired by Windi CSS.
9 
10## Static Shortcuts
11 
12Define as an object mapping shortcut names to utility combinations:
13 
14```ts
15shortcuts: {
16  // Multiple utilities combined
17  'btn': 'py-2 px-4 font-semibold rounded-lg shadow-md',
18  'btn-green': 'text-white bg-green-500 hover:bg-green-700',
19  // Single utility alias
20  'red': 'text-red-100',
21}
22```
23 
24Usage:
25```html
26<button class="btn btn-green">Click me</button>
27```
28 
29## Dynamic Shortcuts
30 
31Use RegExp matcher with function, similar to dynamic rules:
32 
33```ts
34shortcuts: [
35  // Static shortcuts can be in array too
36  {
37    btn: 'py-2 px-4 font-semibold rounded-lg shadow-md',
38  },
39  // Dynamic shortcut
40  [/^btn-(.*)$/, ([, c]) => `bg-${c}-400 text-${c}-100 py-2 px-4 rounded-lg`],
41]
42```
43 
44Now `btn-green` and `btn-red` generate:
45 
46```css
47.btn-green {
48  padding: 0.5rem 1rem;
49  --un-bg-opacity: 1;
50  background-color: rgb(74 222 128 / var(--un-bg-opacity));
51  border-radius: 0.5rem;
52  --un-text-opacity: 1;
53  color: rgb(220 252 231 / var(--un-text-opacity));
54}
55```
56 
57## Accessing Theme in Shortcuts
58 
59Dynamic shortcuts receive context with theme access:
60 
61```ts
62shortcuts: [
63  [/^badge-(.*)$/, ([, c], { theme }) => {
64    if (Object.keys(theme.colors).includes(c))
65      return `bg-${c}4:10 text-${c}5 rounded`
66  }],
67]
68```
69 
70## Shortcuts Layer
71 
72Shortcuts are output to the `shortcuts` layer by default. Configure with:
73 
74```ts
75shortcutsLayer: 'my-shortcuts-layer'
76```
77 
78## Key Points
79 
80- Later shortcuts have higher priority
81- Shortcuts can reference other shortcuts
82- Dynamic shortcuts work like dynamic rules
83- Shortcuts are expanded at build time, not runtime
84- All variants work with shortcuts (`hover:btn`, `dark:btn`, etc.)
85 
86<!-- 
87Source references:
88- https://unocss.dev/config/shortcuts
89-->
90