執行環境

UnoCSS 執行環境提供 CDN 版本，可以直接在瀏覽器中運行 UnoCSS。它會偵測 DOM 的變化並即時產生樣式。

用法

在您的 index.html 中加入以下程式碼

index.html

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

預設情況下，會套用 Uno 預設集。

執行環境不包含預處理，如果您需要樣式重置，可以自行新增，或使用 重置套件 中的樣式。

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

版本

提供多種版本以適用於不同的使用案例。

Uno（預設）

使用 @unocss/preset-uno 預設集

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

Attributify

使用 @unocss/preset-uno 和 @unocss/preset-attributify 預設集

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

Mini

使用 @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>

Bundler 用法

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>