运行时

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

运行时不附带预检，如果你需要重置样式，你可以添加自己的样式，或使用 重置软件包 中的样式。

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