Runtime

UnoCSS runtime poskytuje CDN zostavu, ktorá spúšťa UnoCSS priamo v prehliadači. Deteguje zmeny DOM a generuje štýly za behu.

Použitie

Pridajte nasledujúci riadok do vášho index.html:

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

Runtime môže byť nakonfigurovaný definovaním konfigurácie pred načítaním runtime:

<!-- definovať unocss možnosti... -->
<script>
  window.__unocss = {
    rules: [
      // vlastné pravidlá...
    ],
    presets: [
      // vlastné presety...
    ],
    // ...
  }
</script>
<!-- ... a potom načítať runtime -->
<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"></script>

Predvolene sa aplikuje Wind3 preset.

Runtime neprichádza s preflights, ak chcete resetovanie štýlov, môžete pridať vlastné alebo použiť jeden z balíka Reset.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@unocss/reset/normalize.min.css" />
<!-- alebo -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@unocss/reset/tailwind.min.css" />

Zostavy

K dispozícii je niekoľko zostáv pre rôzne prípady použitia.

Uno (predvolené)

S presetom @unocss/preset-wind3:

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

Attributify

S presetmi @unocss/preset-wind3 a @unocss/preset-attributify:

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

Mini

S presetmi @unocss/preset-mini a @unocss/preset-attributify:

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

Core

Ak potrebujete miešať presety, môžete načítať iba core runtime a manuálne priradiť presety. Všetky oficiálne presety z UnoCSS sú dostupné. Načítajte ten, ktorý potrebujete, pred inicializáciou 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>

Použitie v Bundleri

npm i @unocss/runtime

import initUnocssRuntime from '@unocss/runtime'

initUnocssRuntime({ /* možnosti */ })

Konfigurácia UnoCSS môže byť poskytnutá pomocou vlastnosti defaults:

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

initUnocssRuntime({ defaults: config })

Presety môžu byť importované z 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/' })],
})

Predchádzanie FOUC

Keďže UnoCSS beží po pripravení DOM, môže dôjsť k "záblesku nestylovaného obsahu" (FOUC), ktorý môže spôsobiť, že používateľ uvidí stránku ako nestylovanú.

Použite atribút un-cloak s CSS pravidlami ako [un-cloak] { display: none } na skrytie nestylovaného prvku, kým UnoCSS neaplikuje štýly.

css

[un-cloak] {
  display: none;
}

html

<div class="text-blue-500" un-cloak>Tento text bude viditeľný iba v modrej farbe.</div>