运行时

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

默认情况下，将应用 Wind3 预设。

🌐 By default, the Wind3 preset is be applied.

运行时不自带预处理样式，如果你想要样式重置，可以自己添加，或者使用来自 Reset package 的样式。

🌐 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（默认）

🌐 Uno (default)

使用 @unocss/preset-wind3 预设：

🌐 With @unocss/preset-wind3 preset:

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

属性化

🌐 Attributify

使用 @unocss/preset-wind3 和 @unocss/preset-attributify 预设：

🌐 With @unocss/preset-wind3 and @unocss/preset-attributify presets:

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

迷你

🌐 Mini

使用 @unocss/preset-mini 和 @unocss/preset-attributify 预设：

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

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

核心

🌐 Core

如果你需要混合搭配预设，你可以只加载核心运行时并手动分配预设。UnoCSS 的所有官方预设都可以使用。在初始化核心运行时之前，先加载你需要的预设。

🌐 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 presetWind3 from 'https://esm.sh/@unocss/preset-wind3'

export default defineConfig({
  presets: [presetWind3(), 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>