stack/v1/packages/mosaic/framework/skills/unocss/references/integrations-vite.md

name, description

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

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',
};