ランタイム

UnoCSS ランタイムは、ブラウザで UnoCSS を直接実行する CDN ビルドを提供します。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>

アトリビュート

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

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 presetUno from 'https://esm.sh/@unocss/preset-uno'

export default defineConfig({
  presets: [presetUno(), presetIcons({ cdn: 'https://esm.sh/' })],
})

FOUC の防止

UnoCSS は DOM の準備ができてから実行されるため、「スタイルのないコンテンツのフラッシュ」(FOUC) が発生し、ユーザーにページがスタイリングされていないように見える可能性があります。

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

css

[un-cloak] {
  display: none;
}

html

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