0
# @unocss/preset-uno
1

2
**DEPRECATED**: This package has been renamed to `@unocss/preset-wind3`. This package serves as a compatibility wrapper providing the same functionality under the original `preset-uno` name.
3

4
@unocss/preset-uno is a UnoCSS preset that provides Tailwind CSS v3 / Windi CSS compatibility through atomic CSS utilities. It offers a comprehensive set of utility classes for rapid styling and prototyping, now implemented as a thin wrapper around @unocss/preset-wind3.
5

6
## Package Information
7

8
- **Package Name**: @unocss/preset-uno
9
- **Package Type**: npm
10
- **Language**: TypeScript
11
- **Installation**: `npm install @unocss/preset-uno`
12
- **Status**: Deprecated (renamed to @unocss/preset-wind3)
13

14
## Core Imports
15

16
```typescript
17
import { presetUno } from "@unocss/preset-uno";
18
import type { PresetUnoOptions, Theme } from "@unocss/preset-uno";
19
```
20

21
Default import:
22

23
```typescript
24
import presetUno from "@unocss/preset-uno";
25
```
26

27
CommonJS:
28

29
```javascript
30
const { presetUno } = require("@unocss/preset-uno");
31
```
32

33
## Basic Usage
34

35
```typescript
36
import { defineConfig } from "unocss";
37
import { presetUno } from "@unocss/preset-uno";
38

39
export default defineConfig({
40
  presets: [
41
    presetUno({
42
      important: false,
43
      // Other preset-wind3 options...
44
    }),
45
  ],
46
});
47
```
48

49
With configuration options:
50

51
```typescript
52
import { defineConfig } from "unocss";
53
import { presetUno } from "@unocss/preset-uno";
54

55
export default defineConfig({
56
  presets: [
57
    presetUno({
58
      important: true, // Add !important to all utilities
59
      variablePrefix: "un-", // CSS variable prefix
60
      dark: "media", // Dark mode strategy
61
    }),
62
  ],
63
});
64
```
65

66
## Capabilities
67

68
### Preset Function
69

70
The main preset function that creates a UnoCSS preset configuration with Tailwind CSS v3 compatibility.
71

72
```typescript { .api }
73
/**
74
 * @deprecated Use `presetWind3` from `@unocss/preset-wind3` instead
75
 */
76
export const presetUno: (options?: PresetUnoOptions) => Preset;
77

78
/**
79
 * Default export of presetUno function
80
 */
81
export default presetUno;
82
```
83

84
### Theme System
85

86
Complete theme configuration re-exported from @unocss/preset-wind3, including extended animations, media queries, and styling configurations.
87

88
```typescript { .api }
89
// Import theme object from theme sub-module
90
import { theme } from "@unocss/preset-uno/theme";
91

92
// Theme object includes:
93
interface ThemeExtensions {
94
  aria: Record<string, string>; // ARIA attribute mappings
95
  animation: {
96
    keyframes: Record<string, Record<string, string>>; // 100+ predefined keyframes
97
    durations: Record<string, string>;
98
    timingFns: Record<string, string>;
99
    properties: Record<string, string>;
100
    counts: Record<string, string>;
101
  };
102
  media: Record<string, string>; // Media query definitions
103
  supports: Record<string, string>; // CSS @supports queries
104
  preflightBase: Record<string, any>; // Base preflight styles
105
  // Plus all theme properties from @unocss/preset-mini
106
}
107
```
108

109
All theme exports from `@unocss/preset-wind3/theme` are available.
110

111
### Color System
112

113
Complete Tailwind CSS color palette re-exported from @unocss/preset-wind3.
114

115
```typescript { .api }
116
// Import colors object from colors sub-module
117
import { colors } from "@unocss/preset-uno/colors";
118

119
// Complete color palette with 50-950 shades for each color:
120
interface ColorsObject {
121
  // Basic colors
122
  inherit: string;
123
  current: string;
124
  transparent: string;
125
  black: string;
126
  white: string;
127
  
128
  // Color scales (50-950 shades each)
129
  rose: Record<string | number, string>;
130
  pink: Record<string | number, string>;
131
  fuchsia: Record<string | number, string>;
132
  purple: Record<string | number, string>;
133
  violet: Record<string | number, string>;
134
  indigo: Record<string | number, string>;
135
  blue: Record<string | number, string>;
136
  sky: Record<string | number, string>;
137
  cyan: Record<string | number, string>;
138
  teal: Record<string | number, string>;
139
  emerald: Record<string | number, string>;
140
  green: Record<string | number, string>;
141
  lime: Record<string | number, string>;
142
  yellow: Record<string | number, string>;
143
  amber: Record<string | number, string>;
144
  orange: Record<string | number, string>;
145
  red: Record<string | number, string>;
146
  gray: Record<string | number, string>;
147
  slate: Record<string | number, string>;
148
  zinc: Record<string | number, string>;
149
  neutral: Record<string | number, string>;
150
  stone: Record<string | number, string>;
151
  // Plus color aliases and shortcuts
152
}
153
```
154

155
All color exports from `@unocss/preset-wind3/colors` are available.
156

157
### Utility Functions
158

159
Comprehensive utility functions re-exported from @unocss/preset-wind3 for color parsing, variant creation, and rule processing.
160

161
```typescript { .api }
162
// Import utility functions from utils sub-module
163
import {
164
  // Color utilities
165
  hex2rgba,
166
  parseCssColor,
167
  colorToString,
168
  colorOpacityToString,
169
  
170
  // String utilities
171
  getBracket,
172
  getStringComponent,
173
  getStringComponents,
174
  
175
  // Handler utilities
176
  createValueHandler,
177
  
178
  // Variant utilities
179
  variantMatcher,
180
  variantParentMatcher,
181
  variantGetBracket,
182
  variantGetParameter,
183
  
184
  // Pseudo-class utilities
185
  createTaggedPseudoClassMatcher,
186
  createPseudoClassesAndElements,
187
  createPseudoClassFunctions,
188
  
189
  // Theme utilities
190
  hasThemeFn,
191
  transformThemeFn,
192
  transformThemeString,
193
  
194
  // Types
195
  type CSSColorValue,
196
  type RGBAColorValue,
197
  type ParsedColorValue,
198
  type ValueHandler,
199
  type PseudoVariantOptions
200
} from "@unocss/preset-uno/utils";
201
```
202

203
All utility exports from `@unocss/preset-wind3/utils` are available.
204

205
## Types
206

207
```typescript { .api }
208
interface PresetUnoOptions extends PresetWind3Options {}
209

210
interface PresetWind3Options extends PresetMiniOptions {
211
  /**
212
   * The important option lets you control whether UnoCSS's utilities should be marked with `!important`.
213
   * 
214
   * This can be really useful when using UnoCSS with existing CSS that has high specificity selectors.
215
   * 
216
   * You can also set `important` to a selector like `#app` instead, which will generate `#app :is(.m-1) { ... }`
217
   * 
218
   * @default false
219
   */
220
  important?: boolean | string;
221
}
222

223
interface DarkModeSelectors {
224
  /**
225
   * Selectors for light variant.
226
   * @default '.light'
227
   */
228
  light?: string | string[];
229
  
230
  /**
231
   * Selectors for dark variant.
232
   * @default '.dark'
233
   */
234
  dark?: string | string[];
235
}
236

237
interface PresetMiniOptions {
238
  /**
239
   * Dark mode options
240
   * @default 'class'
241
   */
242
  dark?: 'class' | 'media' | DarkModeSelectors;
243
  
244
  /**
245
   * Generate tagged pseudo selector as `[group=""]` instead of `.group`
246
   * @default false
247
   */
248
  attributifyPseudo?: boolean;
249
  
250
  /**
251
   * Prefix for CSS variables.
252
   * @default 'un-'
253
   */
254
  variablePrefix?: string;
255
  
256
  /**
257
   * Utils prefix. When using tagged pseudo selector, only the first truthy prefix will be used.
258
   * @default undefined
259
   */
260
  prefix?: string | string[];
261
  
262
  /**
263
   * Generate preflight
264
   * @default true
265
   */
266
  preflight?: boolean | 'on-demand';
267
  
268
  /**
269
   * Enable arbitrary variants, for example `<div class="[&>*]:m-1 [&[open]]:p-2"></div>`.
270
   * Disable this might slightly improve the performance.
271
   * @default true
272
   */
273
  arbitraryVariants?: boolean;
274
}
275

276
type Theme = import('@unocss/preset-wind3').Theme;
277
type Preset = import('@unocss/core').Preset;
278
```
279

280
## Migration Guide
281

282
This package is deprecated. To migrate to the new package:
283

284
1. **Update package.json:**
285
   ```bash
286
   npm uninstall @unocss/preset-uno
287
   npm install @unocss/preset-wind3
288
   ```
289

290
2. **Update imports:**
291
   ```typescript
292
   // Before
293
   import { presetUno } from "@unocss/preset-uno";
294
   
295
   // After
296
   import { presetWind3 as presetUno } from "@unocss/preset-wind3";
297
   // or
298
   import { presetWind3 } from "@unocss/preset-wind3";
299
   ```
300

301
3. **Update configuration:**
302
   ```typescript
303
   // Before
304
   export default defineConfig({
305
     presets: [presetUno()],
306
   });
307
   
308
   // After
309
   export default defineConfig({
310
     presets: [presetWind3()], // or presetUno if aliased
311
   });
312
   ```
313

314
The API and functionality remain identical between the packages.