ランタイム

UnoCSS ランタイムは、ブラウザ内で UnoCSS を実行する CDN ビルドを提供します。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 プリセットが適用されます。

ランタイムにはプリフライトが含まれていないため、スタイルリセットが必要な場合は、自分で追加するか、リセットパッケージから使用できます。

<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({ /* options */ })

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）が発生し、ユーザーがページをスタイルなしで見る可能性があります。

un-cloak 属性を CSS ルール（例：[un-cloak] { display: none }）と共に使用して、UnoCSS がスタイルを適用するまでスタイルのない要素を非表示にします。

::: code-group

[un-cloak] {
  display: none;
}

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

:::