Runtime

UnoCSS runtime ให้ CDN build ที่รัน UnoCSS ได้โดยตรงในเบราว์เซอร์ จะตรวจจับการเปลี่ยนแปลง DOM และสร้าง styles ทันที

การใช้งาน

เพิ่มบรรทัดต่อไปนี้ใน index.html:

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

runtime สามารถกำหนดค่าได้โดยการ define configuration ก่อนโหลด runtime:

<!-- 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 จะถูกใช้งาน

runtime ไม่มาพร้อมกับ preflights หากคุณต้องการ style resets คุณสามารถเพิ่มของคุณเอง หรือใช้จาก Reset package

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

Builds

มีหลาย builds สำหรับ use cases ต่างๆ

Uno (default)

พร้อม preset @unocss/preset-wind3:

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

Attributify

พร้อม presets @unocss/preset-wind3 และ @unocss/preset-attributify:

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

Mini

พร้อม presets @unocss/preset-mini และ @unocss/preset-attributify:

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

Core

หากคุณต้องการผสมและจับคู่ presets คุณสามารถโหลดเฉพาะ core runtime และกำหนด presets เอง official presets ทั้งหมดจาก UnoCSS พร้อมใช้งาน โหลดที่คุณต้องการก่อนเริ่มต้น core runtime

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

npm i @unocss/runtime

import initUnocssRuntime from '@unocss/runtime'

initUnocssRuntime({ /* options */ })

UnoCSS config สามารถให้โดยใช้ property defaults:

import initUnocssRuntime from '@unocss/runtime'
import config from './uno.config'

initUnocssRuntime({ defaults: config })

Presets สามารถ import จาก 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) ซึ่งอาจทำให้ผู้ใช้เห็นหน้าเพจที่ไม่มี style

ใช้ attribute un-cloak กับ CSS rules เช่น [un-cloak] { display: none } เพื่อซ่อน unstyled element จนกว่า UnoCSS จะใช้ styles สำหรับมัน

css

[un-cloak] {
  display: none;
}

html

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