UnoCSS Vite Integration

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

Installation

pnpm add -D unocss

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

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

Create config file:

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

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

Add to entry:

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

Modes

global (default)

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

import 'virtual:uno.css'

vue-scoped

Injects generated CSS into Vue SFC <style scoped>.

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

shadow-dom

For Web Components using Shadow DOM:

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

Add placeholder in component styles:

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:

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

// 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

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

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

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

Preact

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

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

Elm

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

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

Web Components (Lit)

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

// 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:

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:

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

Or use magic comment in files:

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

<!-- Source references:

• https://unocss.dev/integrations/vite

-->