0
# Preset Configuration
1

2
The main preset factory function and configuration options for UnoCSS Preset Wind.
3

4
## Capabilities
5

6
### Preset Wind Function
7

8
Creates a complete UnoCSS preset with Tailwind CSS compatibility, combining rules, theme, shortcuts, variants, and postprocessors.
9

10
```typescript { .api }
11
/**
12
 * The Tailwind CSS / Windi CSS compact preset for UnoCSS.
13
 * 
14
 * @param options - Configuration options for the preset
15
 * @returns Complete UnoCSS preset object
16
 * @see https://unocss.dev/presets/wind
17
 */
18
function presetWind(options?: PresetWindOptions): Preset;
19

20
interface PresetWindOptions extends PresetMiniOptions {
21
  /**
22
   * The important option lets you control whether UnoCSS's utilities should be marked with `!important`.
23
   *
24
   * This can be really useful when using UnoCSS with existing CSS that has high specificity selectors.
25
   *
26
   * You can also set `important` to a selector like `#app` instead, which will generate `#app :is(.m-1) { ... }`
27
   *
28
   * Also check out the compatibility with [:is()](https://caniuse.com/?search=%3Ais())
29
   *
30
   * @default false
31
   */
32
  important?: boolean | string;
33
}
34

35
interface Preset {
36
  name: string;
37
  theme: Theme;
38
  rules: Rule<Theme>[];
39
  shortcuts: Shortcut<Theme>[];
40
  variants: Variant[];
41
  postprocess: Postprocessor[];
42
}
43
```
44

45
**Usage Examples:**
46

47
```typescript
48
import { defineConfig } from "unocss";
49
import { presetWind } from "@unocss/preset-wind";
50

51
// Basic usage with default options
52
export default defineConfig({
53
  presets: [presetWind()],
54
});
55

56
// With important enabled globally
57
export default defineConfig({
58
  presets: [
59
    presetWind({
60
      important: true,
61
    }),
62
  ],
63
});
64

65
// With selector-scoped important
66
export default defineConfig({
67
  presets: [
68
    presetWind({
69
      important: "#app",
70
    }),
71
  ],
72
});
73

74
// Combining with other UnoCSS presets
75
export default defineConfig({
76
  presets: [
77
    presetWind({
78
      important: false,
79
    }),
80
    // other presets...
81
  ],
82
});
83
```
84

85
### Default Export
86

87
The preset function is also available as the default export.
88

89
```typescript { .api }
90
/**
91
 * Default export of the presetWind function
92
 */
93
const presetWindDefault: typeof presetWind;
94
export default presetWindDefault;
95
```
96

97
**Usage Example:**
98

99
```typescript
100
import presetWind from "@unocss/preset-wind";
101

102
export default defineConfig({
103
  presets: [presetWind()],
104
});
105
```
106

107
### Important Option Behavior
108

109
The `important` option controls CSS specificity handling:
110

111
**Boolean Mode (`important: true`):**
112
- Adds `!important` to all generated CSS properties
113
- Example: `.m-4 { margin: 1rem !important; }`
114

115
**Selector Mode (`important: "#app"`):**
116
- Wraps utilities with the specified selector using `:is()`
117
- Example: `#app :is(.m-4) { margin: 1rem; }`
118
- Handles pseudo-elements correctly: `#app :is(.btn)::before { content: ""; }`
119

120
**Default Mode (`important: false` or omitted):**
121
- No special handling applied
122
- Example: `.m-4 { margin: 1rem; }`
123

124
### Individual Component Exports
125

126
The preset exports individual components for advanced usage and customization.
127

128
```typescript { .api }
129
/**
130
 * Individual component exports from preset-wind
131
 */
132
const rules: Rule<Theme>[];
133
const theme: Theme;
134
const shortcuts: Shortcut<Theme>[];
135
function variants(options: PresetWindOptions): Variant<Theme>[];
136
function postprocessors(options: PresetWindOptions): Postprocessor[];
137

138
// Re-exported from preset-mini
139
const colors: ColorTheme;
140
const preflights: Preflight[];
141
type Theme = PresetMiniTheme;
142
```
143

144
**Usage Example:**
145

146
```typescript
147
import { rules, theme, shortcuts, variants, postprocessors } from "@unocss/preset-wind";
148
import { defineConfig } from "unocss";
149

150
// Create custom preset using individual components
151
export default defineConfig({
152
  presets: [
153
    {
154
      name: 'custom-wind-preset',
155
      theme,
156
      rules,
157
      shortcuts,
158
      variants: variants({ important: false }),
159
      postprocess: postprocessors({ important: true })
160
    }
161
  ],
162
});