0
# Shortcuts System
1

2
Predefined utility combinations and common patterns for rapid development with container layout shortcuts.
3

4
## Capabilities
5

6
### Shortcuts Array
7

8
Collection of shortcut definitions providing convenient utility combinations.
9

10
```typescript { .api }
11
const shortcuts: Shortcut<Theme>[];
12

13
type Shortcut<T = {}> = StaticShortcut | DynamicShortcut<T>;
14
type StaticShortcut = [string, string | string[]];
15
type DynamicShortcut<T = {}> = [
16
  RegExp,
17
  (match: RegExpMatchArray, context: ShortcutContext<T>) => string | string[] | undefined,
18
  ShortcutOptions?
19
];
20

21
interface ShortcutContext<T = {}> {
22
  theme: T;
23
  generator: UnoGenerator;
24
  variantHandlers: VariantHandler[];
25
}
26
```
27

28
### Container Shortcuts
29

30
Responsive container layout shortcuts with breakpoint support.
31

32
```typescript { .api }
33
const containerShortcuts: Shortcut<Theme>[];
34
```
35

36
**Container Shortcut Pattern:**
37

38
```typescript { .api }
39
// Pattern: /^(?:(\w+)[:-])?container$/
40
// Generates responsive container utilities based on breakpoints
41
```
42

43
**Generated Utilities:**
44

45
- `container` - Base container utility applying to all breakpoints
46
- `sm:container` - Container starting from small breakpoint
47
- `md:container` - Container starting from medium breakpoint  
48
- `lg:container` - Container starting from large breakpoint
49
- `xl:container` - Container starting from extra-large breakpoint
50
- `2xl:container` - Container starting from 2x extra-large breakpoint
51

52
**Breakpoint Behavior:**
53

54
When a breakpoint-specific container is used (e.g., `md:container`), it applies container styles starting from that breakpoint and all larger breakpoints. For example:
55

56
- `md:container` generates: `md:__container lg:__container xl:__container 2xl:__container`
57
- `lg:container` generates: `lg:__container xl:__container 2xl:__container`
58

59
**Container CSS Behavior:**
60

61
The container shortcuts generate CSS that:
62

63
1. **Sets max-width** based on breakpoint values or theme configuration
64
2. **Centers content** with `margin-left: auto; margin-right: auto` if `theme.container.center` is true
65
3. **Applies padding** based on `theme.container.padding` configuration
66
4. **Sets width: 100%** for base container without variant handlers
67

68
**Theme Configuration:**
69

70
```typescript { .api }
71
interface ContainerTheme {
72
  center?: boolean;
73
  padding?: string | Record<string, string>;
74
  maxWidth?: Record<string, string>;
75
}
76
```
77

78
**Usage Examples:**
79

80
```html
81
<!-- Basic container -->
82
<div class="container mx-auto px-4">
83
  <p>Centered content with responsive max-width</p>
84
</div>
85

86
<!-- Breakpoint-specific containers -->
87
<div class="md:container mx-auto">
88
  <p>Container behavior starts at medium breakpoint</p>
89
</div>
90

91
<!-- Combined with other utilities -->
92
<div class="container lg:container mx-auto px-4 py-8">
93
  <p>Container with padding and responsive behavior</p>
94
</div>
95
```
96

97
**Theme-based Configuration:**
98

99
```typescript
100
// UnoCSS configuration with container theme
101
export default defineConfig({
102
  presets: [presetWind()],
103
  theme: {
104
    container: {
105
      center: true,
106
      padding: {
107
        DEFAULT: '1rem',
108
        sm: '2rem',
109
        lg: '4rem',
110
        xl: '5rem',
111
        '2xl': '6rem',
112
      },
113
      maxWidth: {
114
        sm: '640px',
115
        md: '768px',
116
        lg: '1024px',
117
        xl: '1280px',
118
        '2xl': '1536px',
119
      },
120
    },
121
  },
122
});
123
```
124

125
### Shortcut Implementation
126

127
The shortcuts system processes patterns and generates corresponding utility combinations:
128

129
1. **Pattern Matching**: Regular expressions match utility class patterns
130
2. **Context Processing**: Breakpoint resolution and theme configuration access
131
3. **Utility Generation**: Creates arrays of utility classes based on matched patterns
132
4. **Breakpoint Filtering**: Filters and orders breakpoints for responsive behavior
133

134
**Internal Processing Example:**
135

136
```typescript
137
// When processing "lg:container"
138
// 1. Matches pattern with breakpoint "lg"
139
// 2. Resolves available breakpoints: ['sm', 'md', 'lg', 'xl', '2xl']
140
// 3. Filters to breakpoints from 'lg' onwards: ['lg', 'xl', '2xl']
141
// 4. Generates: ['lg:__container', 'xl:__container', '2xl:__container']
142
// Plus base '__container' if no breakpoint specified
143
```
144

145
**Usage Example:**
146

147
```typescript
148
import { shortcuts } from "@unocss/preset-wind";
149

150
// Shortcuts are used internally by the preset
151
// Access for advanced use cases or custom preset creation
152
const containerShortcuts = shortcuts.filter(shortcut => 
153
  shortcut[0] instanceof RegExp && shortcut[0].source.includes('container')
154
);
155
```