1---
2name: unocss-vite-integration
3description: Setting up UnoCSS with Vite and framework-specific tips
4---
5 
6# UnoCSS Vite Integration
7 
8The Vite plugin is the most common way to use UnoCSS.
9 
10## Installation
11 
12```bash
13pnpm add -D unocss
14```
15 
16```ts
17// vite.config.ts
18import UnoCSS from 'unocss/vite'
19import { defineConfig } from 'vite'
20 
21export default defineConfig({
22  plugins: [
23    UnoCSS(),
24  ],
25})
26```
27 
28Create config file:
29 
30```ts
31// uno.config.ts
32import { defineConfig, presetWind3 } from 'unocss'
33 
34export default defineConfig({
35  presets: [
36    presetWind3(),
37  ],
38})
39```
40 
41Add to entry:
42 
43```ts
44// main.ts
45import 'virtual:uno.css'
46```
47 
48## Modes
49 
50### global (default)
51 
52Standard mode - generates global CSS injected via `uno.css` import.
53 
54```ts
55import 'virtual:uno.css'
56```
57 
58### vue-scoped
59 
60Injects generated CSS into Vue SFC `<style scoped>`.
61 
62```ts
63UnoCSS({
64  mode: 'vue-scoped',
65})
66```
67 
68### shadow-dom
69 
70For Web Components using Shadow DOM:
71 
72```ts
73UnoCSS({
74  mode: 'shadow-dom',
75})
76```
77 
78Add placeholder in component styles:
79 
80```ts
81const template = document.createElement('template')
82template.innerHTML = `
83<style>
84  :host { ... }
85  @unocss-placeholder
86</style>
87<div class="m-1em">...</div>
88`
89```
90 
91### per-module (experimental)
92 
93Generates CSS per module with optional scoping.
94 
95### dist-chunk (experimental)
96 
97Generates CSS per chunk on build for MPA.
98 
99## DevTools Support
100 
101Edit classes directly in browser DevTools:
102 
103```ts
104import 'virtual:uno.css'
105import 'virtual:unocss-devtools'
106```
107 
108**Warning:** Uses MutationObserver to detect changes. Dynamic classes from scripts will also be included.
109 
110## Framework-Specific Setup
111 
112### React
113 
114```ts
115// vite.config.ts
116import React from '@vitejs/plugin-react'
117import UnoCSS from 'unocss/vite'
118 
119export default {
120  plugins: [
121    UnoCSS(), // Must be before React when using attributify
122    React(),
123  ],
124}
125```
126 
127**Note:** Remove `tsc` from build script if using `@unocss/preset-attributify`.
128 
129### Vue
130 
131Works out of the box with `@vitejs/plugin-vue`.
132 
133### Svelte
134 
135```ts
136import { svelte } from '@sveltejs/vite-plugin-svelte'
137import extractorSvelte from '@unocss/extractor-svelte'
138import UnoCSS from 'unocss/vite'
139 
140export default {
141  plugins: [
142    UnoCSS({
143      extractors: [extractorSvelte()],
144    }),
145    svelte(),
146  ],
147}
148```
149 
150Supports `class:foo` and `class:foo={bar}` syntax.
151 
152### SvelteKit
153 
154Same as Svelte, use `sveltekit()` from `@sveltejs/kit/vite`.
155 
156### Solid
157 
158```ts
159import UnoCSS from 'unocss/vite'
160import solidPlugin from 'vite-plugin-solid'
161 
162export default {
163  plugins: [
164    UnoCSS(),
165    solidPlugin(),
166  ],
167}
168```
169 
170### Preact
171 
172```ts
173import Preact from '@preact/preset-vite'
174import UnoCSS from 'unocss/vite'
175 
176export default {
177  plugins: [
178    UnoCSS(),
179    Preact(),
180  ],
181}
182```
183 
184### Elm
185 
186```ts
187import Elm from 'vite-plugin-elm'
188import UnoCSS from 'unocss/vite'
189 
190export default {
191  plugins: [
192    Elm(),
193    UnoCSS(),
194  ],
195}
196```
197 
198### Web Components (Lit)
199 
200```ts
201UnoCSS({
202  mode: 'shadow-dom',
203  shortcuts: [
204    { 'cool-blue': 'bg-blue-500 text-white' },
205  ],
206})
207```
208 
209```ts
210// my-element.ts
211@customElement('my-element')
212export class MyElement extends LitElement {
213  static styles = css`
214    :host { ... }
215    @unocss-placeholder
216  `
217}
218```
219 
220Supports `part-[<part-name>]:<utility>` for `::part` styling.
221 
222## Inspector
223 
224Visit `http://localhost:5173/__unocss` in dev mode to:
225 
226- Inspect generated CSS rules
227- See applied classes per file
228- Test utilities in REPL
229 
230## Legacy Browser Support
231 
232With `@vitejs/plugin-legacy`:
233 
234```ts
235import legacy from '@vitejs/plugin-legacy'
236import UnoCSS from 'unocss/vite'
237 
238export default {
239  plugins: [
240    UnoCSS({
241      legacy: {
242        renderModernChunks: false,
243      },
244    }),
245    legacy({
246      targets: ['defaults', 'not IE 11'],
247      renderModernChunks: false,
248    }),
249  ],
250}
251```
252 
253## VanillaJS / TypeScript
254 
255By default, `.js` and `.ts` files are not extracted. Configure to include:
256 
257```ts
258// uno.config.ts
259export default defineConfig({
260  content: {
261    pipeline: {
262      include: [
263        /\.(vue|svelte|[jt]sx|html)($|\?)/,
264        'src/**/*.{js,ts}',
265      ],
266    },
267  },
268})
269```
270 
271Or use magic comment in files:
272 
273```ts
274// @unocss-include
275export const classes = {
276  active: 'bg-primary text-white',
277}
278```
279 
280<!-- 
281Source references:
282- https://unocss.dev/integrations/vite
283-->
284