Runtime

UnoCSS 런타임은 브라우저에서 바로 UnoCSS를 실행하는 CDN 빌드를 제공합니다. DOM 변경을 감지하고 즉시 스타일을 생성합니다.

사용법

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>

기본적으로 Wind3 preset이 적용됩니다.

런타임에는 preflight가 없습니다. 스타일 리셋을 원한다면 직접 추가하거나 Reset 패키지에서 하나를 사용할 수 있습니다.

<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-wind3 preset 포함:

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

Attributify

@unocss/preset-wind3 및 @unocss/preset-attributify preset 포함:

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

Mini

@unocss/preset-mini 및 @unocss/preset-attributify preset 포함:

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

Core

preset을 혼합하고 매치해야 한다면, 핵심 런타임만 로드하고 preset을 수동으로 할당할 수 있습니다. UnoCSS의 모든 공식 preset을 사용할 수 있습니다. 핵심 런타임을 초기화하기 전에 필요한 것을 로드하세요.

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

preset은 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이 준비된 후에 실행되므로, 사용자가 페이지를 스타일이 없는 상태로 보게 할 수 있는 "flash of unstyled content" (FOUC)가 발생할 수 있습니다.

un-cloak 속성과 [un-cloak] { display: none }과 같은 CSS 규칙을 사용하여 UnoCSS가 스타일을 적용할 때까지 스타일이 없는 요소를 숨기세요.

css

[un-cloak] {
  display: none;
}

html

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