0
# Build Tool Integrations
1

2
Integration plugins for popular build tools and frameworks, providing seamless UnoCSS integration with development and build processes.
3

4
## Capabilities
5

6
### Vite Integration
7

8
Vite plugin for UnoCSS integration with hot module replacement and development server support.
9

10
```typescript { .api }
11
/**
12
 * UnoCSS Vite plugin with preset defaults
13
 * @param configOrPath - Configuration object or path to config file
14
 * @returns Array of Vite plugins
15
 */
16
export default function UnocssVitePlugin<Theme>(
17
  configOrPath?: VitePluginConfig<Theme> | string
18
): Plugin[];
19

20
interface VitePluginConfig<Theme = object> extends UserConfig<Theme> {
21
  /** Mode for CSS generation */
22
  mode?: 'global' | 'vue-scoped' | 'svelte-scoped' | 'shadow-dom' | 'per-module' | 'dist-chunk';
23
  /** Inspector configuration */
24
  inspector?: boolean | InspectorOptions;
25
  /** Virtual CSS modules */
26
  virtualModules?: string[] | boolean;
27
  /** Enable source maps */
28
  sourcemap?: boolean;
29
  /** HMR configuration */
30
  hmr?: boolean | { port?: number };
31
}
32

33
interface InspectorOptions {
34
  /** Inspector port */
35
  port?: number;
36
  /** Enable inspector */
37
  enabled?: boolean;
38
}
39
```
40

41
**Usage Examples:**
42

43
```typescript
44
// vite.config.ts
45
import { defineConfig } from 'vite';
46
import UnoCSS from 'unocss/vite';
47

48
export default defineConfig({
49
  plugins: [
50
    UnoCSS({
51
      // Configuration here, or use defineConfig in uno.config.ts
52
      inspector: true,
53
      mode: 'global'
54
    })
55
  ]
56
});
57

58
// With config file path
59
import UnoCSS from 'unocss/vite';
60

61
export default defineConfig({
62
  plugins: [
63
    UnoCSS('./uno.config.ts')
64
  ]
65
});
66
```
67

68
### Astro Integration
69

70
Astro integration for UnoCSS with SSR and component support.
71

72
```typescript { .api }
73
/**
74
 * UnoCSS Astro integration with preset defaults
75
 * @param config - Configuration object
76
 * @returns Astro integration
77
 */
78
export default function UnocssAstroIntegration<Theme>(
79
  config?: AstroIntegrationConfig<Theme>
80
): AstroIntegration;
81

82
interface AstroIntegrationConfig<Theme = object> extends UserConfig<Theme> {
83
  /** Include patterns for files to process */
84
  include?: string | string[];
85
  /** Exclude patterns for files to ignore */
86
  exclude?: string | string[];
87
  /** Enable inspector */
88
  inspector?: boolean;
89
  /** Astro-specific mode */
90
  mode?: 'global' | 'per-module';
91
}
92

93
interface AstroIntegration {
94
  name: string;
95
  hooks: Record<string, any>;
96
}
97
```
98

99
**Usage Examples:**
100

101
```typescript
102
// astro.config.mjs
103
import { defineConfig } from 'astro/config';
104
import UnoCSS from 'unocss/astro';
105

106
export default defineConfig({
107
  integrations: [
108
    UnoCSS({
109
      include: ['**/*.astro', '**/*.vue', '**/*.tsx'],
110
      inspector: true
111
    })
112
  ]
113
});
114

115
// With separate config file
116
import UnoCSS from 'unocss/astro';
117

118
export default defineConfig({
119
  integrations: [UnoCSS()]
120
});
121
```
122

123
### Webpack Integration
124

125
Webpack plugin for UnoCSS integration with module federation and code splitting support.
126

127
```typescript { .api }
128
/**
129
 * UnoCSS Webpack plugin with preset defaults
130
 * @param configOrPath - Configuration object or path to config file
131
 * @returns Webpack plugin
132
 */
133
export default function UnocssWebpackPlugin<Theme>(
134
  configOrPath?: WebpackPluginOptions<Theme> | string
135
): any;
136

137
interface WebpackPluginOptions<Theme = object> extends UserConfig<Theme> {
138
  /** Test pattern for files to process */
139
  test?: RegExp;
140
  /** Include patterns */
141
  include?: string | RegExp | (string | RegExp)[];
142
  /** Exclude patterns */
143
  exclude?: string | RegExp | (string | RegExp)[];
144
  /** Enable minification */
145
  minify?: boolean;
146
  /** Webpack-specific mode */
147
  mode?: 'global' | 'chunk' | 'module';
148
}
149
```
150

151
**Usage Examples:**
152

153
```javascript
154
// webpack.config.js
155
const UnoCSS = require('unocss/webpack');
156

157
module.exports = {
158
  plugins: [
159
    new UnoCSS({
160
      test: /\.(vue|jsx?|tsx?)$/,
161
      minify: true
162
    })
163
  ]
164
};
165

166
// ESM syntax
167
import UnoCSS from 'unocss/webpack';
168

169
export default {
170
  plugins: [
171
    new UnoCSS('./uno.config.ts')
172
  ]
173
};
174
```
175

176
### PostCSS Integration
177

178
PostCSS plugin for UnoCSS integration with existing PostCSS workflows. This is a direct re-export of the `@unocss/postcss` plugin.
179

180
```typescript { .api }
181
/**
182
 * UnoCSS PostCSS plugin (re-exported from @unocss/postcss)
183
 * @param options - PostCSS plugin configuration options
184
 * @returns PostCSS plugin
185
 */
186
export default function unocss(options?: any): any;
187
```
188

189
**Usage Examples:**
190

191
```javascript
192
// postcss.config.js
193
module.exports = {
194
  plugins: {
195
    'unocss/postcss': {
196
      content: ['**/*.html', '**/*.js', '**/*.vue']
197
    }
198
  }
199
};
200

201
// With Tailwind migration
202
module.exports = {
203
  plugins: {
204
    'unocss/postcss': {
205
      configOrPath: './uno.config.ts'
206
    },
207
    'autoprefixer': {}
208
  }
209
};
210
```
211

212
```css
213
/* CSS file using PostCSS plugin */
214
@unocss preflights;
215
@unocss default;
216

217
/* Your custom CSS */
218
.custom-class {
219
  @apply text-center py-4;
220
}
221

222
@unocss utilities;
223
```
224

225
## Integration-Specific Features
226

227
### Development Tools
228

229
```typescript
230
// Enable inspector across integrations
231
export default defineConfig({
232
  // Vite
233
  plugins: [UnoCSS({ inspector: true })],
234
  
235
  // Astro  
236
  integrations: [UnoCSS({ inspector: true })],
237
  
238
  // Webpack
239
  plugins: [new UnoCSS({ inspector: true })]
240
});
241
```
242

243
### Hot Module Replacement
244

245
```typescript
246
// Vite HMR configuration
247
export default defineConfig({
248
  plugins: [
249
    UnoCSS({
250
      hmr: {
251
        port: 3456
252
      }
253
    })
254
  ]
255
});
256
```
257

258
### Content Sources
259

260
```typescript
261
// File watching configuration
262
export default defineConfig({
263
  // Global content configuration
264
  content: {
265
    filesystem: ['**/*.{html,js,jsx,ts,tsx,vue,svelte}'],
266
    inline: ['<div class="text-red-500">...</div>']
267
  },
268
  
269
  // Integration-specific
270
  plugins: [
271
    UnoCSS({
272
      include: ['src/**/*.{vue,jsx,tsx}'],
273
      exclude: ['node_modules/**']
274
    })
275
  ]
276
});
277
```
278

279
## Framework-Specific Configurations
280

281
### React/Next.js Setup
282

283
```typescript
284
// next.config.js
285
const UnoCSS = require('unocss/webpack');
286

287
module.exports = {
288
  webpack: (config) => {
289
    config.plugins.push(
290
      new UnoCSS({
291
        test: /\.(jsx?|tsx?)$/
292
      })
293
    );
294
    return config;
295
  }
296
};
297

298
// Or with Vite (if using Vite with React)
299
export default defineConfig({
300
  plugins: [
301
    react(),
302
    UnoCSS({
303
      mode: 'global'
304
    })
305
  ]
306
});
307
```
308

309
### Vue Setup
310

311
```typescript
312
// vite.config.ts (Vue)
313
import vue from '@vitejs/plugin-vue';
314
import UnoCSS from 'unocss/vite';
315

316
export default defineConfig({
317
  plugins: [
318
    vue(),
319
    UnoCSS({
320
      mode: 'vue-scoped'
321
    })
322
  ]
323
});
324
```
325

326
### Svelte Setup
327

328
```typescript
329
// vite.config.js (SvelteKit)
330
import { sveltekit } from '@sveltejs/kit/vite';
331
import UnoCSS from 'unocss/vite';
332

333
export default defineConfig({
334
  plugins: [
335
    UnoCSS({
336
      mode: 'svelte-scoped',
337
      inspector: true
338
    }),
339
    sveltekit()
340
  ]
341
});
342
```
343

344
### Nuxt Setup
345

346
```typescript
347
// nuxt.config.ts
348
export default defineNuxtConfig({
349
  modules: ['@unocss/nuxt'],
350
  css: ['@unocss/reset/tailwind.css'],
351
  unocss: {
352
    // UnoCSS options
353
    inspector: true
354
  }
355
});
356
```
357

358
## CSS Output Modes
359

360
### Global Mode
361

362
```typescript
363
// Single global CSS file
364
export default defineConfig({
365
  plugins: [
366
    UnoCSS({
367
      mode: 'global' // Default mode
368
    })
369
  ]
370
});
371
```
372

373
### Per-Module Mode
374

375
```typescript
376
// CSS modules per component
377
export default defineConfig({
378
  plugins: [
379
    UnoCSS({
380
      mode: 'per-module'
381
    })
382
  ]
383
});
384
```
385

386
### Scoped Modes
387

388
```typescript
389
// Framework-specific scoping
390
export default defineConfig({
391
  plugins: [
392
    UnoCSS({
393
      mode: 'vue-scoped'    // Vue scoped styles
394
      // mode: 'svelte-scoped' // Svelte scoped styles
395
      // mode: 'shadow-dom'    // Shadow DOM encapsulation
396
    })
397
  ]
398
});
399
```
400

401
## Integration Import Patterns
402

403
### Direct Integration Imports
404

405
```typescript
406
// Import from specific integration paths
407
import UnoCSS from 'unocss/vite';
408
import UnoCSS from 'unocss/astro';
409
import UnoCSS from 'unocss/webpack';
410
import unocss from 'unocss/postcss';
411
```
412

413
### Plugin Configuration
414

415
```typescript
416
// Standard plugin configuration pattern
417
export default defineConfig({
418
  plugins: [
419
    UnoCSS({
420
      // UnoCSS configuration
421
      presets: [presetUno()],
422
      // Integration-specific options
423
      inspector: true,
424
      mode: 'global'
425
    })
426
  ]
427
});
428
```