Files

T

fargo 1a822493ba format: apply repo prettier (3.8.1) to the folded skills tree

963 markdown files reformatted with the repository's pinned prettier so
pnpm format:check covers the folded tree like every other repo file.

The formatter's embedded-language pass also normalized code fences
(TS semicolons, closed HTML tags in examples, lowercased CSS hex colors,
one renumbered list that skipped an index). Alphanumeric token deltas vs
the fold commit were audited file-by-file; all are formatter-equivalent
markup normalizations plus the four sanitized skills.

2026-08-19 14:37:17 -05:00

4.1 KiB

Raw Blame History

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

4.1 KiB Raw Blame History