---
name: unocss-vite-integration
description: Setting up UnoCSS with Vite and framework-specific tips
---

# UnoCSS Vite Integration

The Vite plugin is the most common way to use UnoCSS.

## Installation

```bash
pnpm add -D unocss
```

```ts
// vite.config.ts
import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    UnoCSS(),
  ],
})
```

Create config file:

```ts
// uno.config.ts
import { defineConfig, presetWind3 } from 'unocss'

export default defineConfig({
  presets: [
    presetWind3(),
  ],
})
```

Add to entry:

```ts
// main.ts
import 'virtual:uno.css'
```

## Modes

### global (default)

Standard mode - generates global CSS injected via `uno.css` import.

```ts
import 'virtual:uno.css'
```

### vue-scoped

Injects generated CSS into Vue SFC `<style scoped>`.

```ts
UnoCSS({
  mode: 'vue-scoped',
})
```

### shadow-dom

For Web Components using Shadow DOM:

```ts
UnoCSS({
  mode: 'shadow-dom',
})
```

Add placeholder in component styles:

```ts
const template = document.createElement('template')
template.innerHTML = `
<style>
  :host { ... }
  @unocss-placeholder
</style>
<div class="m-1em">...</div>
`
```

### per-module (experimental)

Generates CSS per module with optional scoping.

### dist-chunk (experimental)

Generates CSS per chunk on build for MPA.

## DevTools Support

Edit classes directly in browser DevTools:

```ts
import 'virtual:uno.css'
import 'virtual:unocss-devtools'
```

**Warning:** Uses MutationObserver to detect changes. Dynamic classes from scripts will also be included.

## Framework-Specific Setup

### React

```ts
// vite.config.ts
import React from '@vitejs/plugin-react'
import UnoCSS from 'unocss/vite'

export default {
  plugins: [
    UnoCSS(), // Must be before React when using attributify
    React(),
  ],
}
```

**Note:** Remove `tsc` from build script if using `@unocss/preset-attributify`.

### Vue

Works out of the box with `@vitejs/plugin-vue`.

### Svelte

```ts
import { svelte } from '@sveltejs/vite-plugin-svelte'
import extractorSvelte from '@unocss/extractor-svelte'
import UnoCSS from 'unocss/vite'

export default {
  plugins: [
    UnoCSS({
      extractors: [extractorSvelte()],
    }),
    svelte(),
  ],
}
```

Supports `class:foo` and `class:foo={bar}` syntax.

### SvelteKit

Same as Svelte, use `sveltekit()` from `@sveltejs/kit/vite`.

### Solid

```ts
import UnoCSS from 'unocss/vite'
import solidPlugin from 'vite-plugin-solid'

export default {
  plugins: [
    UnoCSS(),
    solidPlugin(),
  ],
}
```

### Preact

```ts
import Preact from '@preact/preset-vite'
import UnoCSS from 'unocss/vite'

export default {
  plugins: [
    UnoCSS(),
    Preact(),
  ],
}
```

### Elm

```ts
import Elm from 'vite-plugin-elm'
import UnoCSS from 'unocss/vite'

export default {
  plugins: [
    Elm(),
    UnoCSS(),
  ],
}
```

### Web Components (Lit)

```ts
UnoCSS({
  mode: 'shadow-dom',
  shortcuts: [
    { 'cool-blue': 'bg-blue-500 text-white' },
  ],
})
```

```ts
// my-element.ts
@customElement('my-element')
export class MyElement extends LitElement {
  static styles = css`
    :host { ... }
    @unocss-placeholder
  `
}
```

Supports `part-[<part-name>]:<utility>` for `::part` styling.

## Inspector

Visit `http://localhost:5173/__unocss` in dev mode to:

- Inspect generated CSS rules
- See applied classes per file
- Test utilities in REPL

## Legacy Browser Support

With `@vitejs/plugin-legacy`:

```ts
import legacy from '@vitejs/plugin-legacy'
import UnoCSS from 'unocss/vite'

export default {
  plugins: [
    UnoCSS({
      legacy: {
        renderModernChunks: false,
      },
    }),
    legacy({
      targets: ['defaults', 'not IE 11'],
      renderModernChunks: false,
    }),
  ],
}
```

## VanillaJS / TypeScript

By default, `.js` and `.ts` files are not extracted. Configure to include:

```ts
// uno.config.ts
export default defineConfig({
  content: {
    pipeline: {
      include: [
        /\.(vue|svelte|[jt]sx|html)($|\?)/,
        'src/**/*.{js,ts}',
      ],
    },
  },
})
```

Or use magic comment in files:

```ts
// @unocss-include
export const classes = {
  active: 'bg-primary text-white',
}
```

<!-- 
Source references:
- https://unocss.dev/integrations/vite
-->