運行時

UnoCSS 運行時提供了一個 CDN 構建，可以直接在瀏覽器中運行 UnoCSS。它會檢測 DOM 變化並即時生成樣式。

使用方法

在 index.html 中添加以下行：

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

可以通過在加載運行時之前定義配置來配置運行時：

<!-- 定義 unocss 選項... -->
<script>
  window.__unocss = {
    rules: [
      // 自定義規則...
    ],
    presets: [
      // 自定義預設...
    ],
    // ...
  }
</script>
<!-- ... 然後加載運行時 -->
<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"></script>

默認情況下，將應用 Wind3 預設。

運行時不包含預處理樣式，如果你想要樣式重置，可以添加自己的預處理樣式，或使用 Reset 包 中的預處理樣式。

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

構建版本

針對不同使用場景提供了多個構建版本。

Uno（默認）

使用 @unocss/preset-wind3 預設：

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

屬性模式

使用 @unocss/preset-wind3 和 @unocss/preset-attributify 預設：

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

迷你版

使用 @unocss/preset-mini 和 @unocss/preset-attributify 預設：

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

核心

如果需要混合和匹配預設，可以只加載核心運行時並手動分配預設。UnoCSS 的所有官方預設都可用。在初始化核心運行時之前加載所需的預設。

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

打包器使用

npm i @unocss/runtime

import initUnocssRuntime from '@unocss/runtime'

initUnocssRuntime({ /* 選項 */ })

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

export default defineConfig({
  presets: [presetWind3(), 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>這段文字只會以藍色顯示。</div>