0
# CSS Presets
1

2
Pre-built CSS utility collections providing different atomic CSS methodologies and frameworks. Presets define rules, shortcuts, and variants that generate CSS utilities based on class names.
3

4
## Capabilities
5

6
### Core Presets
7

8
Essential presets providing different approaches to atomic CSS generation.
9

10
```typescript { .api }
11
/**
12
 * Uno preset - The default UnoCSS preset (deprecated, use presetWind3)
13
 * @param options - Configuration options
14
 * @returns Preset configuration
15
 */
16
function presetUno(options?: PresetUnoOptions): Preset<PresetUnoTheme>;
17

18
/**
19
 * Mini preset - Essential utilities with minimal configuration
20
 * @param options - Configuration options
21
 * @returns Preset configuration
22
 */
23
function presetMini(options?: PresetMiniOptions): Preset<PresetMiniTheme>;
24

25
/**
26
 * Wind preset - Tailwind-compatible utilities
27
 * @param options - Configuration options
28
 * @returns Preset configuration
29
 */
30
function presetWind(options?: PresetWindOptions): Preset<PresetWindTheme>;
31

32
/**
33
 * Wind3 preset - Tailwind v3 compatible utilities
34
 * @param options - Configuration options
35
 * @returns Preset configuration
36
 */
37
function presetWind3(options?: PresetWind3Options): Preset<PresetWind3Theme>;
38

39
/**
40
 * Wind4 preset - Tailwind v4 compatible utilities
41
 * @param options - Configuration options
42
 * @returns Preset configuration
43
 */
44
function presetWind4(options?: PresetWind4Options): Preset<PresetWind4Theme>;
45

46
interface PresetUnoOptions {
47
  /** Enable dark mode utilities */
48
  dark?: 'media' | 'class' | 'both';
49
  /** Attributify mode options */
50
  attributify?: boolean | AttributifyOptions;
51
  /** Color options */
52
  colors?: Record<string, any>;
53
  /** Prefix for utilities */
54
  prefix?: string;
55
  /** Enable preflight styles */
56
  preflight?: boolean;
57
}
58

59
interface PresetMiniOptions {
60
  /** Enable dark mode utilities */
61
  dark?: 'media' | 'class' | 'both';
62
  /** Enable preflight styles */
63
  preflight?: boolean;
64
  /** Custom color palette */
65
  colors?: Record<string, any>;
66
  /** Enable CSS variables */
67
  variablesCss?: boolean;
68
}
69

70
interface PresetWindOptions {
71
  /** Enable dark mode utilities */
72
  dark?: 'media' | 'class' | 'both';
73
  /** Custom color palette */
74
  colors?: Record<string, any>;
75
  /** Enable preflight styles */
76
  preflight?: boolean;
77
  /** CSS variables prefix */
78
  variablePrefix?: string;
79
}
80
```
81

82
**Usage Examples:**
83

84
```typescript
85
import { defineConfig, presetUno, presetMini } from "unocss";
86

87
export default defineConfig({
88
  presets: [
89
    presetUno({
90
      dark: 'class',
91
      colors: {
92
        primary: '#3b82f6',
93
        secondary: '#64748b'
94
      }
95
    }),
96
    presetMini({
97
      preflight: false
98
    })
99
  ]
100
});
101
```
102

103
### Specialized Presets
104

105
Presets that provide specific functionality and features.
106

107
```typescript { .api }
108
/**
109
 * Attributify preset - Enables attributify mode for grouping utilities in attributes
110
 * @param options - Configuration options
111
 * @returns Preset configuration
112
 */
113
function presetAttributify(options?: AttributifyOptions): Preset;
114

115
/**
116
 * Icons preset - Enables CSS icon utilities from icon collections
117
 * @param options - Configuration options
118
 * @returns Preset configuration
119
 */
120
function presetIcons(options?: IconsOptions): Preset;
121

122
/**
123
 * Tagify preset - Enables tagify mode for tag-based utilities
124
 * @param options - Configuration options
125
 * @returns Preset configuration
126
 */
127
function presetTagify(options?: object): Preset;
128

129
/**
130
 * Typography preset - Provides typography utilities and prose styles
131
 * @param options - Configuration options
132
 * @returns Preset configuration
133
 */
134
function presetTypography(options?: TypographyOptions): Preset;
135

136
/**
137
 * Web fonts preset - Enables web font utilities
138
 * @param options - Configuration options
139
 * @returns Preset configuration
140
 */
141
function presetWebFonts(options?: WebFontsOptions): Preset;
142

143
interface AttributifyOptions {
144
  /** CSS selector prefix */
145
  prefix?: string;
146
  /** CSS selector suffix */
147
  prefixedOnly?: boolean;
148
  /** Non-valued attributes */
149
  nonValuedAttribute?: boolean;
150
  /** Ignored attributes */
151
  ignoreAttributes?: string[];
152
}
153

154
interface IconsOptions {
155
  /** Icon collections to load */
156
  collections?: Record<string, any>;
157
  /** Icon scale factor */
158
  scale?: number;
159
  /** Enable CDN mode */
160
  cdn?: string;
161
  /** Custom icon loader */
162
  customizations?: {
163
    iconCustomizer?: (collection: string, icon: string, props: any) => any;
164
    transform?: (svg: string, collection: string, icon: string) => string;
165
  };
166
  /** Warning for missing icons */
167
  warn?: boolean;
168
  /** Icon unit */
169
  unit?: string;
170
}
171

172
interface TypographyOptions {
173
  /** CSS selector for typography */
174
  className?: string;
175
  /** Custom CSS styles */
176
  cssExtend?: Record<string, any>;
177
  /** Compatibility mode */
178
  compatibility?: {
179
    vendor?: {
180
      'webkit'?: boolean;
181
      'moz'?: boolean;
182
    };
183
    modern?: boolean;
184
  };
185
}
186

187
interface WebFontsOptions {
188
  /** Web font provider */
189
  provider?: 'google' | 'bunny' | 'fontshare' | 'none';
190
  /** Font families to load */
191
  fonts?: Record<string, string | string[] | WebFontMeta>;
192
  /** Extended font families */
193
  extendTheme?: boolean;
194
  /** Inline CSS */
195
  inlineImports?: boolean;
196
  /** Custom fetcher */
197
  customFetch?: (url: string) => Promise<string>;
198
}
199

200
interface WebFontMeta {
201
  name: string;
202
  weights?: (string | number)[];
203
  italic?: boolean;
204
  provider?: string;
205
}
206
```
207

208
**Usage Examples:**
209

210
```typescript
211
import { defineConfig, presetAttributify, presetIcons, presetTypography } from "unocss";
212

213
export default defineConfig({
214
  presets: [
215
    presetAttributify({
216
      prefix: 'un-',
217
      prefixedOnly: true
218
    }),
219
    presetIcons({
220
      collections: {
221
        heroicons: () => import('@iconify-json/heroicons/icons.json').then(i => i.default),
222
        carbon: () => import('@iconify-json/carbon/icons.json').then(i => i.default)
223
      },
224
      scale: 1.2,
225
      warn: true
226
    }),
227
    presetTypography({
228
      cssExtend: {
229
        'code': {
230
          color: '#8b5cf6'
231
        }
232
      }
233
    })
234
  ]
235
});
236

237
// Attributify mode usage in HTML
238
// <div bg="blue-400 hover:blue-500" text="white sm"></div>
239

240
// Icons usage
241
// <div class="i-heroicons-heart-solid text-red-500"></div>
242

243
// Typography usage
244
// <article class="prose prose-lg mx-auto"></article>
245
```
246

247
## Theme Types
248

249
### Preset Theme Interfaces
250

251
```typescript { .api }
252
/** Default theme interface from preset-uno */
253
interface Theme {
254
  colors?: Record<string, any>;
255
  fontFamily?: Record<string, string | string[]>;
256
  fontSize?: Record<string, [string, { lineHeight?: string; letterSpacing?: string }] | string>;
257
  fontWeight?: Record<string, string>;
258
  spacing?: Record<string, string>;
259
  screens?: Record<string, string>;
260
  breakpoints?: Record<string, string>;
261
  borderRadius?: Record<string, string>;
262
  boxShadow?: Record<string, string>;
263
  opacity?: Record<string, string>;
264
  zIndex?: Record<string, string>;
265
  duration?: Record<string, string>;
266
  easing?: Record<string, string>;
267
}
268

269
/** Mini preset theme */
270
interface PresetMiniTheme extends Theme {
271
  container?: {
272
    center?: boolean;
273
    padding?: string | Record<string, string>;
274
    screens?: Record<string, string>;
275
  };
276
}
277

278
/** Uno preset theme */
279
interface PresetUnoTheme extends PresetMiniTheme {
280
  aria?: Record<string, string>;
281
  data?: Record<string, string>;
282
  animation?: Record<string, string>;
283
  keyframes?: Record<string, Record<string, any>>;
284
}
285

286
/** Wind preset theme variations */
287
interface PresetWindTheme extends PresetUnoTheme {}
288
interface PresetWind3Theme extends PresetUnoTheme {}
289
interface PresetWind4Theme extends PresetUnoTheme {}
290

291
/** Typography theme extension */
292
interface TypographyTheme {
293
  typography?: Record<string, any>;
294
}
295
```
296

297
## Preset Import Patterns
298

299
### Individual Preset Imports
300

301
```typescript
302
// Import individual presets from main package
303
import { presetUno } from "unocss";
304
import { presetAttributify } from "unocss";
305
import { presetIcons } from "unocss";
306

307
// Or import from specific preset subpaths
308
import presetUno from "unocss/preset-uno";
309
import presetAttributify from "unocss/preset-attributify";
310
import presetIcons from "unocss/preset-icons";
311
import presetMini from "unocss/preset-mini";
312
import presetTypography from "unocss/preset-typography";
313
import presetWind from "unocss/preset-wind";
314
import presetWind3 from "unocss/preset-wind3";
315
import presetWind4 from "unocss/preset-wind4";
316
import presetWebFonts from "unocss/preset-web-fonts";
317
import presetTagify from "unocss/preset-tagify";
318
```
319

320
### Common Preset Combinations
321

322
```typescript
323
import { defineConfig, presetUno, presetAttributify, presetIcons } from "unocss";
324

325
// Full-featured setup
326
export default defineConfig({
327
  presets: [
328
    presetUno(), // Base utilities
329
    presetAttributify(), // Attributify mode
330
    presetIcons({ // Icon utilities
331
      collections: {
332
        heroicons: () => import('@iconify-json/heroicons/icons.json').then(i => i.default)
333
      }
334
    })
335
  ]
336
});
337

338
// Minimal setup
339
export default defineConfig({
340
  presets: [
341
    presetMini() // Essential utilities only
342
  ]
343
});
344

345
// Tailwind-compatible setup
346
export default defineConfig({
347
  presets: [
348
    presetWind3() // Tailwind v3 compatibility
349
  ]
350
});
351
```