运行时

¥Runtime

UnoCSS 运行时提供了一个 CDN 构建，可以直接在浏览器中运行 UnoCSS。它将检测 DOM 更改并动态生成样式。

¥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

将以下行添加到你的 index.html：

¥Add the following line to your index.html:

index.html

<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"></script>

The runtime may be configured by defining the configuration before loading the runtime:

<!-- 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 Uno 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.

<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-uno preset:

<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime/uno.global.js"></script>

Attributify

With @unocss/preset-uno and @unocss/preset-attributify presets:

<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime/attributify.global.js"></script>

Mini

With @unocss/preset-mini and @unocss/preset-attributify preset:

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

<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

npm i @unocss/runtime

import initUnocssRuntime from '@unocss/runtime'

initUnocssRuntime({ /* options */ })

可以使用 defaults 属性提供 UnoCSS 配置：

¥A UnoCSS config can be provided using the defaults property:

import initUnocssRuntime from '@unocss/runtime'
import config from './uno.config'

initUnocssRuntime({ defaults: config })

可以从 esm.sh 导入预设：

¥Presets can be imported from esm.sh:

import { defineConfig } from '@unocss/runtime'
import presetIcons from 'https://esm.sh/@unocss/preset-icons/browser'
import presetUno from 'https://esm.sh/@unocss/preset-uno'

export default defineConfig({
  presets: [presetUno(), presetIcons({ cdn: 'https://esm.sh/' })],
})

预防 FOUC

¥Preventing FOUC

由于 UnoCSS 在 DOM 准备好后运行，因此可能会出现 "闪现的无样式内容" (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.

使用 un-cloak 属性和 CSS 规则（例如 [un-cloak] { display: none }）来隐藏无样式元素，直到 UnoCSS 为其应用样式。

¥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

[un-cloak] {
  display: none;
}

html

<div class="text-blue-500" un-cloak>
  This text will only be visible in blue color.
</div>