ランタイム

UnoCSSランタイムは、UnoCSSをブラウザ上で直接実行できるCDNビルドを提供します。DOMの変化を検知し、リアルタイムでスタイルを生成します。

使い方

index.htmlに次の1行を追加します：

<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プリセットが適用されます。

ランタイムにはプリフライト（リセットCSS）は含まれていません。リセットスタイルが必要な場合は、自分で追加するか、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>

Attributify

@unocss/preset-wind3と@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>

Core

プリセットを自由に組み合わせたい場合は、コアランタイムのみを読み込み、プリセットを手動で割り当てることができます。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({ /* オプション */ })

UnoCSSの設定はdefaultsプロパティで渡せます：

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（Flash of Unstyled Content）」が発生し、ユーザーが一時的にスタイルのないページを見る可能性があります。

un-cloak属性と[un-cloak] { display: none }のようなCSSルールを使い、UnoCSSがスタイルを適用するまで未スタイル要素を非表示にできます。

css

[un-cloak] {
  display: none;
}

html

<div class="text-blue-500" un-cloak>このテキストは青色でのみ表示されます。</div>