Meta tags:
description=CSS-in-JS runtime of UnoCSS (@unocss/runtime).;
author=Anthony Fu;

Headings (most frequently used words):

usage, runtime, guides, integrations, builds, bundler, preventing, fouc, uno, default, attributify, mini, core,

Text of the page (most frequently used words):
unocss (31), the (24), #runtime (23), script (18), presets (17), https (13), cdn (13), html (11), preset (11), npm (10), from (9), config (9), jsdelivr (9), net (9), src (7), you (7), page (6), can (6), import (6), and (6), attributify (6), css (5), with (5), esm (5), wind3 (5), global (5), reset (5), this (4), cloak (4), rules (4), initunocssruntime (4), core (4), mini (4), integrations (4), extension (4), overview (4), extractor (4), cli (3), next (3), webpack (3), use (3), unstyled (3), for (3), preseticons (3), default (3), icons (3), uno (3), window (3), load (3), are (3), style (3), svelte (3), safelist (3), file (3), changes (2), div (2), text (2), will (2), only (2), blue (2), class (2), none (2), display (2), styles (2), runs (2), dom (2), content (2), fouc (2), may (2), presetwind3 (2), defineconfig (2), browser (2), defaults (2), options (2), usage (2), __unocss (2), need (2), available (2), one (2), before (2), builds (2), min (2), href (2), stylesheet (2), rel (2), link (2), preflights (2), add (2), your (2), custom (2), index (2), examples (2), zed (2), jetbrains (2), ide (2), plugin (2), code (2), lsp (2), support (2), twoslash (2), eslint (2), postcss (2), scoped (2), astro (2), nuxt (2), vite (2), extracting (2), why (2), getting (2), started (2), navigation (2), variants (2), extractors (2), transformers (2), guide (2), copyright, 2021, present, anthony, released, under, mit, license, previous, pager, last, updated, suggest, visible, color, 500, attribute, such, hide, element, until, applies, since, after, ready, there, flash, which, leads, user, see, preventing, export, imported, provided, using, property, bash, bundler, scale, __unocss_runtime, mix, match, assign, manually, all, initializing, official, several, different, cases, tailwind, normalize, does, not, come, want, have, resets, either, own, package, applied, then, define, configured, defining, configuration, loading, following, line, provide, build, that, right, detect, generate, fly, llm, read, 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, legacy, compat, web, fonts, typography, wind4, community, autocomplete, layers, theme, shortcuts, concepts, main, ctrl, search, skip,

Text of the page (random words):
unocss cdn runtime 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 7 5 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 runtime md for this page in markdown format runtime unocss runtime provide a cdn build that runs the unocss right in the browser it will detect the dom changes and generate the styles on the fly usage add the following line to your index html index html html script src https cdn jsdelivr net npm unocss runtime script the runtime may be configured by defining the configuration before loading the runtime html define unocss options script window __unocss rules custom rules presets custom presets script and then load the runtime script src https cdn jsdelivr net npm unocss runtime script by default the wind3 preset is be applied the runtime does not come with preflights if you want to have style resets you can either add your own or use one from reset package html link rel stylesheet href https cdn jsdelivr net npm unocss reset normalize min css or link rel stylesheet href https cdn jsdelivr net npm unocss reset tailwind min css builds several builds are available for different use cases uno default with unocss preset wind3 preset html script src https cdn jsdelivr net npm unocss runtime uno global js script attributify with unocss preset wind3 and unocss preset attributify presets html script src https cdn jsdelivr net npm unocss runtime attributify global js script mini with unocss preset mini and unocss preset attributify preset html script src https cdn jsdelivr net npm unocss runtime mini global js script core if you need to mix and match presets you can load only the core runtime and assign the presets manually all the official presets from unocss are available load the one you need before initializing the core runtime html script src https cdn jsdelivr net npm unocss runtime preset icons global js script script window __unocss presets window __unocss_runtime presets preseticons scale 1 2 cdn https esm sh script script src https cdn jsdelivr net npm unocss runtime core global js script bundler usage bash npm i unocss runtime ts import initunocssruntime from unocss runtime initunocssruntime options a unocss config can be provided using the defaults property ts import initunocssruntime from unocss runtime import config from uno config initunocssruntime defaults config presets can be imported from esm sh ts import defineconfig from unocss runtime import preseticons from https esm sh unocss preset icons browser import presetwind3 from https esm sh unocss preset wind3 export default defineconfig presets presetwind3 preseticons cdn https esm sh preventing fouc since unocss runs after the dom is ready there can be a flash of unstyled content fouc which may leads the user to see the page as unstyled use un cloak attribute with css rules such as un cloak display none to hide the unstyled element until unocss applies the styles for it css html css un cloak display none html div class text blue 500 un cloak this text will only be visible in blue color div suggest changes to this page last updated pager previous page webpack next page cli released under the mit license copyright 2021 present anthony fu