0
# UnoCSS Preset Wind
1

2
UnoCSS Preset Wind is a comprehensive Tailwind CSS and Windi CSS compatibility preset for UnoCSS. It provides a complete utility-first CSS framework with extensive animation support, responsive variants, theming capabilities, and Tailwind-compatible utility classes, designed for maximum compatibility with existing Tailwind CSS projects while leveraging UnoCSS's performance benefits through on-demand CSS generation.
3

4
## Package Information
5

6
- **Package Name**: @unocss/preset-wind
7
- **Package Type**: npm
8
- **Language**: TypeScript  
9
- **Installation**: `npm install @unocss/preset-wind`
10

11
## Core Imports
12

13
```typescript
14
import { presetWind } from "@unocss/preset-wind";
15
```
16

17
For accessing individual modules:
18

19
```typescript
20
import { presetWind, rules, theme, shortcuts, variants, postprocessors } from "@unocss/preset-wind";
21
import { colors, preflights } from "@unocss/preset-wind";
22
```
23

24
For individual module imports from subpaths:
25

26
```typescript
27
import { rules } from "@unocss/preset-wind/rules";
28
import { theme } from "@unocss/preset-wind/theme";
29
import { shortcuts } from "@unocss/preset-wind/shortcuts";
30
import { variants } from "@unocss/preset-wind/variants";
31
```
32

33
CommonJS:
34

35
```javascript
36
const { presetWind } = require("@unocss/preset-wind");
37
```
38

39
## Basic Usage
40

41
```typescript
42
import { defineConfig } from "unocss";
43
import { presetWind } from "@unocss/preset-wind";
44

45
export default defineConfig({
46
  presets: [
47
    presetWind({
48
      important: false, // Optional: control !important usage
49
    }),
50
  ],
51
});
52
```
53

54
With important CSS specificity control:
55

56
```typescript
57
export default defineConfig({
58
  presets: [
59
    presetWind({
60
      important: true, // Add !important to all utilities
61
      // OR
62
      important: "#app", // Scope utilities under #app selector
63
    }),
64
  ],
65
});
66
```
67

68
## Architecture
69

70
UnoCSS Preset Wind is built around several key components:
71

72
- **Main Preset Function**: `presetWind()` factory that combines all components into a UnoCSS preset
73
- **Rules System**: Comprehensive CSS rule definitions for utilities, animations, layouts, and behaviors
74
- **Theme Configuration**: Extensive theming system including colors, animations, media queries, and design tokens
75
- **Variants System**: Responsive breakpoints, pseudo-classes, dark mode, and CSS combinators
76
- **Shortcuts System**: Predefined utility combinations for common patterns
77
- **Postprocessors**: CSS transformation pipeline including important utility handling
78

79
## Capabilities
80

81
### Main Preset
82

83
Core preset factory function that creates a complete UnoCSS preset with Tailwind CSS compatibility.
84

85
```typescript { .api }
86
function presetWind(options?: PresetWindOptions): Preset;
87

88
interface PresetWindOptions extends PresetMiniOptions {
89
  /**
90
   * The important option lets you control whether UnoCSS's utilities should be marked with `!important`.
91
   * 
92
   * This can be really useful when using UnoCSS with existing CSS that has high specificity selectors.
93
   * 
94
   * You can also set `important` to a selector like `#app` instead, which will generate `#app :is(.m-1) { ... }`
95
   * 
96
   * Also check out the compatibility with [:is()](https://caniuse.com/?search=%3Ais())
97
   * 
98
   * @default false
99
   */
100
  important?: boolean | string;
101
}
102
```
103

104
[Preset Configuration](./preset.md)
105

106
### CSS Rules System
107

108
Comprehensive collection of CSS utility rules including animations, backgrounds, layouts, typography, and behaviors.
109

110
```typescript { .api }
111
const rules: Rule<Theme>[];
112
```
113

114
[CSS Rules](./rules.md)
115

116
### Theme Configuration
117

118
Extensive theming system with animation definitions, media queries, color schemes, and design tokens.
119

120
```typescript { .api }
121
const theme: Theme;
122
```
123

124
[Theme System](./theme.md)
125

126
### Variants System
127

128
Responsive variants, pseudo-classes, dark mode support, and CSS combinators for conditional styling.
129

130
```typescript { .api }
131
function variants(options: PresetWindOptions): Variant<Theme>[];
132
```
133

134
[Variants System](./variants.md)
135

136
### Shortcuts System
137

138
Predefined utility combinations and common patterns for rapid development.
139

140
```typescript { .api }
141
const shortcuts: Shortcut<Theme>[];
142
```
143

144
[Shortcuts](./shortcuts.md)
145

146
### Postprocessors System
147

148
CSS transformation pipeline for handling important utilities and other post-processing tasks.
149

150
```typescript { .api }
151
function postprocessors(options: PresetWindOptions): Postprocessor[];
152

153
function important(option: PresetWindOptions['important']): Postprocessor[];
154
```
155

156
[Postprocessors System](./postprocessors.md)
157

158
## Core Types
159

160
```typescript { .api }
161
interface Preset {
162
  name: string;
163
  theme?: Theme;
164
  rules?: Rule[];
165
  shortcuts?: Shortcut[];
166
  variants?: Variant[];
167
  postprocess?: Postprocessor | Postprocessor[];
168
}
169

170
interface PresetMiniOptions {
171
  /**
172
   * Generate preflight
173
   * @default true
174
   */
175
  preflight?: boolean;
176
  /**
177
   * Enable dark mode utilities
178
   * @default 'class'
179
   */
180
  dark?: 'class' | 'media' | string;
181
  /**
182
   * Enable attributify mode utilities
183
   * @default false
184
   */
185
  attributifyPseudo?: boolean;
186
  /**
187
   * Prefix for CSS variables
188
   * @default 'un-'
189
   */
190
  variablePrefix?: string;
191
  /**
192
   * Utils prefix
193
   * @default undefined
194
   */
195
  prefix?: string;
196
}
197

198
type Rule<T = {}> = StaticRule | DynamicRule<T>;
199
type StaticRule = [string, CSSObject | CSSValue];
200
type DynamicRule<T = {}> = [
201
  RegExp,
202
  (match: RegExpMatchArray, context: RuleContext<T>) => CSSObject | CSSValue | undefined,
203
  RuleOptions?
204
];
205

206
type Shortcut<T = {}> = StaticShortcut | DynamicShortcut<T>;
207
type StaticShortcut = [string, string | string[]];
208
type DynamicShortcut<T = {}> = [
209
  RegExp,
210
  (match: RegExpMatchArray, context: ShortcutContext<T>) => string | string[] | undefined,
211
  ShortcutOptions?
212
];
213

214
type Variant = (matcher: VariantMatcherContext) => VariantHandlerContext | string | undefined;
215

216
type Postprocessor = (util: PostprocessorContext) => void;
217

218
interface PostprocessorContext {
219
  selector: string;
220
  entries: [string, string | number | undefined][];
221
  parent?: Rule;
222
  layer?: string;
223
  sort?: number;
224
}
225

226
interface Theme {
227
  colors?: ColorTheme;
228
  fontFamily?: FontFamilyTheme;
229
  breakpoints?: BreakpointTheme;
230
  animation?: AnimationTheme;
231
  [key: string]: any;
232
}
233

234
type CSSObject = Record<string, string | number | CSSObject>;
235
type CSSValue = string | number;
236
```
237

238
## Re-exported from @unocss/preset-mini
239

240
```typescript { .api }
241
const colors: ColorTheme;
242
const preflights: Preflight[];
243

244
type Theme = PresetMiniTheme;
245
```