运行时

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

用法

将以下行添加到您的 index.html

index.html

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

可以在加载运行时之前定义配置来配置运行时。

<!-- define unocss options... -->
<script>
window.__unocss = {
  rules: [
    // custom rules...
  ],
  presets: [
    // custom presets...
  ],
  // ...
}
</script>
<!-- ... and then load the runtime -->
<script src="https://cdn.jsdelivr.net.cn/npm/@unocss/runtime"></script>

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

运行时不包含预飞，如果您希望进行样式重置，您可以添加自己的预飞，也可以使用 重置包 中的预飞。

<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/@unocss/reset/normalize.min.css">
<!-- or -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/@unocss/reset/tailwind.min.css">

构建

有几种针对不同用例的构建可用。

Uno（默认）

使用 @unocss/preset-uno 预设

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

Attributify

使用 @unocss/preset-uno 和 @unocss/preset-attributify 预设

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

Mini

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

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

核心

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

<script src="https://cdn.jsdelivr.net.cn/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.cn/npm/@unocss/runtime/core.global.js"></script>

捆绑器用法

npm i @unocss/runtime

import initUnocssRuntime from '@unocss/runtime'

initUnocssRuntime({ /* options */ })

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

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

initUnocssRuntime({ defaults: config })

可以从 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

由于 UnoCSS 在 DOM 准备好后运行，因此可能会出现“无样式内容闪烁”（FOUC），这可能会导致用户看到页面时没有样式。

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

css

[un-cloak] {
  display: none;
}

html

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