Runtime

UnoCSS runtime cung cấp một bản build CDN chạy UnoCSS ngay trong trình duyệt. Nó sẽ phát hiện thay đổi DOM và tạo kiểu ngay lập tức.

Sử dụng

Thêm dòng sau vào index.html của bạn:

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

Runtime có thể được cấu hình bằng cách định nghĩa cấu hình trước khi tải 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>

Theo mặc định, Wind3 preset được áp dụng.

Runtime không đi kèm preflights, nếu bạn muốn đặt lại kiểu, bạn có thể thêm của riêng mình, hoặc dùng một từ Gói 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" />

Bản Build

Một số bản build có sẵn cho các trường hợp sử dụng khác nhau.

Uno (mặc định)

Với preset @unocss/preset-wind3:

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

Attributify

Với presets @unocss/preset-wind3 và @unocss/preset-attributify:

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

Mini

Với presets @unocss/preset-mini và @unocss/preset-attributify:

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

Core

Nếu bạn cần trộn và khớp presets, bạn chỉ có thể tải core runtime và gán presets thủ công. Tất cả presets chính thức từ UnoCSS đều có sẵn. Tải cái bạn cần trước khi khởi tạo 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>

Sử dụng Bundler

npm i @unocss/runtime

import initUnocssRuntime from '@unocss/runtime'

initUnocssRuntime({ /* options */ })

Cấu hình UnoCSS có thể được cung cấp bằng thuộc tính defaults:

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

initUnocssRuntime({ defaults: config })

Presets có thể được import từ 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/' })],
})

Ngăn chặn FOUC

Vì UnoCSS chạy sau khi DOM đã sẵn sàng, có thể có "flash of unstyled content" (FOUC) có thể dẫn đến người dùng thấy trang không có kiểu.

Dùng thuộc tính un-cloak với các quy tắc CSS như [un-cloak] { display: none } để ẩn phần tử không có kiểu cho đến khi UnoCSS áp dụng kiểu cho nó.

css

[un-cloak] {
  display: none;
}

html

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