Meta tags:
description=The Vite plugin for UnoCSS (@unocss/vite).;
author=Anthony Fu;

Headings (most frequently used words):

in, scoped, svelte, experimental, vite, plugin, guides, integrations, installation, modes, edit, classes, devtools, frameworks, legacy, license, global, default, vue, shadow, dom, per, module, dist, chunk, vanillajs, typescript, react, preact, sveltekit, web, components, solid, elm, marko, part, built, support,

Text of the page (most frequently used words):
unocss (71), vite (58), the (50), plugin (39), from (38), import (38), you (36), config (19), add (18), #default (17), and (17), using (17), plugins (16), part (16), css (16), export (15), with (15), for (15), svelte (15), style (13), class (13), mode (13), react (13), defineconfig (12), your (12), this (11), web (11), need (10), shadow (10), dom (10), will (10), template (9), example (9), presets (8), vitejs (8), div (8), cool (8), placeholder (8), scoped (8), legacy (7), components (7), uno (7), preact (7), build (7), vue (6), marko (6), options (6), parts (6), can (6), use (6), rules (6), project (6), preset (6), support (6), extractorsvelte (6), extractors (6), extractor (6), foo (6), file (6), page (5), overview (5), elm (5), 500 (5), shortcuts (5), work (5), some (5), examples (5), attributify (5), bash (5), changes (4), not (4), before (4), green (4), more (4), check (4), have (4), each (4), its (4), package (4), prefresh (4), are (4), safelist (4), devtools (4), code (4), main (4), generated (4), integrations (4), extension (4), license (3), nuxt (3), next (3), false (3), rendermodernchunks (3), option (3), solid (3), innerhtml (3), createelement (3), document (3), const (3), blue (3), component (3), don (3), only (3), name (3), rule (3), shortcut (3), since (3), simple (3), linked (3), below (3), src (3), directory (3), just (3), remove (3), sveltekit (3), sveltejs (3), include (3), see (3), configure (3), must (3), scripts (3), script (3), content (3), extracting (3), frameworks (3), stylesheet (3), classes (3), virtual (3), entry (3), ide (3), global (3), 2021 (2), present (2), anthony (2), under (2), mit (2), presetwind3 (2), run (2), solidplugin (2), another (2), text (2), uses (2), avoid (2), same (2), element (2), mini (2), lit (2), host (2), styles (2), block (2), enable (2), multiples (2), red (2), bar (2), app (2), both (2), configuration (2), json (2), should (2), tsc (2), when (2), vanillajs (2), typescript (2), files (2), read (2), that (2), following (2), dev (2), production (2), dynamic (2), those (2), want (2), directly (2), generate (2), sheet (2), chunk (2), experimental (2), module (2), inline (2), sfcs (2), custom (2), set (2), modes (2), install (2), deno (2), bun (2), npm (2), yarn (2), pnpm (2), zed (2), jetbrains (2), lsp (2), twoslash (2), eslint (2), postcss (2), cli (2), runtime (2), webpack (2), astro (2), reset (2), why (2), getting (2), started (2), navigation (2), variants (2), transformers (2), guide (2), copyright, released, previous, pager, last, updated, suggest, defaults, targets, after, container, then, black, white, collisions, multiple, distinct, worry, about, take, care, nth, type, supports, via, like, built, static, litelement, extends, myelement, customelement, 1em, forget, expose, application, kit, routes, layout, babel, compiler, extensions, allow, parse, excluded, out, section, tools, pipeline, caveats, fixed, make, one, apply, suggestions, please, caution, hood, detect, which, means, manual, but, also, made, detected, included, could, cause, misalignment, between, based, logic, tags, recommended, adding, setup, regression, tests, possible, mutationobserver, warning, because, limitation, demand, where, know, haven, used, source, yet, try, how, things, changing, lines, edit, great, mpa, dist, per, magic, defining, define, alongside, wrap, comment, syntax, errors, there, way, unless, penetrate, into, properties, has, been, moved, own, inject, isolation, injected, index, html, enables, hmr, point, comes, different, behaviors, create, installation, ships, llm, better, optimized, documentation, markdown, format, guides, sidebar, return, top, menu, appearance, contributing, release, notes, v66, team, tutorial, playground, interactive, docs, resources, arbitrary, mdc, pug, jsx, compile, directives, variant, group, rem, tagify, compat, fonts, typography, icons, wind4, wind3, community, autocomplete, layers, preflights, theme, concepts, ctrl, search, skip,

Text of the page (random words):
unocss vite plugin skip to content unocss search ctrl k main navigation guide guide getting started why unocss presets style reset config file extracting safelist integrations overview integrations vite nuxt next astro svelte scoped webpack runtime cli postcss eslint twoslash lsp support vs code extension jetbrains ide plugin zed extension examples config config file concepts overview rules variants shortcuts theme extractors preflights safelist layers presets transformers autocomplete presets overview community presets presets mini wind3 wind4 icons attributify typography web fonts legacy compat tagify rem to px transformers variant group directives compile class attributify jsx extractors pug extractor mdc extractor svelte extractor arbitrary variants extractor resources interactive docs playground tutorial team v66 8 0 release notes contributing appearance menu return to top sidebar navigation guides getting started why unocss presets style reset config file extracting safelist integrations overview vite nuxt next astro svelte scoped webpack runtime cli postcss eslint twoslash lsp support vs code extension jetbrains ide plugin zed extension examples config presets on this page are you an llm you can read better optimized documentation at integrations vite md for this page in markdown format vite plugin the vite plugin ships with the unocss package installation pnpm yarn npm bun deno bash pnpm add d unocss bash yarn add d unocss bash npm install d unocss bash bun add d unocss bash deno add d unocss install the plugin vite config ts ts import unocss from unocss vite import defineconfig from vite export default defineconfig plugins unocss create a uno config ts file uno config ts ts import defineconfig from unocss export default defineconfig unocss options add virtual uno css to your main entry main ts ts import virtual uno css modes the vite plugin comes with a set of modes that enable different behaviors global default this is the default mode for the plugin in this mode you need to add the import of uno css on your entry point this mode enables a set of vite plugins for build and for dev with hmr support the generated css will be a global stylesheet injected on the index html vue scoped this mode will inject generated css to vue sfcs style scoped for isolation svelte scoped svelte scoped mode has been moved to its own package see unocss svelte scoped vite shadow dom since web components uses shadow dom there is no way to style content directly from a global stylesheet unless you use css custom properties those will penetrate the shadow dom you need to inline the generated css by the plugin into the shadow dom style to inline the generated css you only need to configure the plugin mode to shadow dom and include unocss placeholder magic placeholder on each web component style css block if you are defining your web components in vue sfcs and want to define custom styles alongside unocss you can wrap placeholder in a css comment to avoid syntax errors in your ide per module experimental this mode will generate a css sheet for each module can be scoped dist chunk experimental this mode will generate a css sheet for each code chunk on build great for mpa edit classes in devtools because of limitation of on demand where the devtools don t know those you haven t used in your source code yet so if you want to try how things work by directly changing the classes in devtools just add the following lines to your main entry ts import uno css import virtual unocss devtools warning please use it with caution under the hood we use mutationobserver to detect the class changes which means not only your manual changes but also the changes made by your scripts will be detected and included in the stylesheet this could cause some misalignment between dev and the production build when you add dynamic classes based on some logic in script tags we recommended adding your dynamic parts to the safelist or setup ui regression tests for your production build if possible frameworks some ui app frameworks have some caveats that must be fixed to make it work if you re using one of the following frameworks just apply the suggestions vanillajs typescript when using vanillajs or typescript you need to add js and ts files extensions to allow unocss read and parse the content by default js and ts files are excluded check out the extracting from build tools pipeline section react if you re using vitejs plugin react vite config ts ts import react from vitejs plugin react import unocss from unocss vite export default plugins react unocss if you re using unocss preset attributify you should remove tsc from the build script if you are using babel plugin react compiler or vitejs plugin react with unocss preset attributify you must add the plugin before vitejs plugin react vite config ts ts import react from vitejs plugin react import unocss from unocss vite export default plugins unocss react you have a react example project on examples vite react directory using both plugins check the scripts on package json and its vite configuration file preact if you re using preact preset vite vite config ts ts import preact from preact preset vite import unocss from unocss vite export default plugins unocss preact or if you re using prefresh vite vite config ts ts import prefresh from prefresh vite import unocss from unocss vite export default plugins unocss prefresh if you re using unocss preset attributify you should remove tsc from the build script you have a preact example project on examples vite preact directory using both plugins check the scripts on package json and its vite configuration file svelte you must add the plugin before sveltejs vite plugin svelte to support class foo and class foo bar add the plugin and configure extractorsvelte on extractors option you can use simple rules with class for example class bg red 500 foo or using shortcuts to include multiples rules see src app svelte on linked example project below vite config ts 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 more options svelte sveltekit to support class foo and class foo bar add the plugin and configure extractorsvelte on extractors option you can use simple rules with class for example class bg red 500 foo or using shortcuts to include multiples rules see src routes layout svelte on linked example project below vite config ts ts import sveltekit from sveltejs kit vite import extractorsvelte from unocss extractor svelte import unocss from unocss vite import defineconfig from vite export default defineconfig plugins unocss extractors extractorsvelte more options sveltekit web components to work with web components you need to enable shadow dom mode on the plugin don t forget to remove the import for uno css since the shadow dom mode will not expose it and the application will not work vite config ts ts import unocss from unocss vite export default plugins unocss mode shadow dom more options on each web component just add unocss placeholder to its style css block ts const template document createelement template template innerhtml style host unocss placeholder style div class m 1em div if you re using lit ts customelement my element export class myelement extends litelement static styles css host unocss placeholder you have a web components example project on examples vite lit directory part built in support you can use part since the plugin supports it via shortcuts and using part part name rule shortcut rule from preset mini for example using it with simple rules like part part name bg green 500 or using some shortcut check src my element ts on linked example project below the part part name rule shortcut will work only with this plugin using the shadow dom mode the plugin uses nth of type to avoid collisions with multiple parts in the same web component and for the same parts on distinct web components you don t need to worry about it the plugin will take care for you vite config ts ts import unocss from unocss vite export default plugins unocss mode shadow dom shortcuts cool blue bg blue 500 text white cool green bg green 500 text black more options then in your web components ts my container wc ts const template document createelement template template innerhtml style unocss placeholder style my wc with parts class part cool part cool blue part another cool part cool green my wc with parts ts my wc with parts ts const template document createelement template template innerhtml style unocss placeholder style div div part cool part div div part another cool part div div solid you need to add the vite plugin solid plugin after unocss s plugin vite config ts ts import unocss from unocss vite import solidplugin from vite plugin solid export default plugins unocss options solidplugin elm you need to add the vite plugin elm plugin before unocss s plugin vite config ts ts import unocss from unocss vite import defineconfig from vite import elm from vite plugin elm export default defineconfig plugins elm unocss marko you need to add marko vite or marko run vite before unocss s plugin vite config ts ts import marko from marko run vite import unocss from unocss vite import defineconfig from vite export default defineconfig plugins marko unocss legacy if vitejs plugin legacy with rendermodernchunks false your need add it to unocss option ts import legacy from vitejs plugin legacy import vue from vitejs plugin vue import presetwind3 from unocss import unocss from unocss vite import defineconfig from vite export default defineconfig plugins vue unocss presets presetwind3 legacy rendermodernchunks false legacy targets defaults not ie 11 rendermodernchunks false license mit license 2021 present anthony fu suggest changes to this page last updated pager previous page overview next page nuxt released under the mit license copyright 2021 present anthony fu