Runtime

Runtime-ul UnoCSS oferă o build CDN care rulează UnoCSS direct în browser. Va detecta modificările DOM și va genera stilurile din mers.

Utilizare

Adăugați următoarea linie în index.html:

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

Runtime-ul poate fi configurat definind configurația înainte de încărcarea runtime-ului:

<!-- definiți opțiunile unocss... -->
<script>
  window.__unocss = {
    rules: [
      // reguli personalizate...
    ],
    presets: [
      // preset-uri personalizate...
    ],
    // ...
  }
</script>
<!-- ... și apoi încărcați runtime-ul -->
<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"></script>

În mod implicit, preset-ul Wind3 va fi aplicat.

Runtime-ul nu vine cu preflights, dacă doriți să aveți resetări de stil, puteți fie adăuga una proprie, sau utiliza una din Pachetul Reset.

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

Build-uri

Mai multe build-uri sunt disponibile pentru diferite cazuri de utilizare.

Uno (implicit)

Cu preset-ul @unocss/preset-wind3:

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

Attributify

Cu preset-urile @unocss/preset-wind3 și @unocss/preset-attributify:

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

Mini

Cu preset-urile @unocss/preset-mini și @unocss/preset-attributify:

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

Core

Dacă trebuie să amestecați și potriviți preset-uri, puteți încărca doar runtime-ul core și atribui preset-urile manual. Toate preset-urile oficiale din UnoCSS sunt disponibile. Încărcați pe cea aveți nevoie înainte de a inițializa runtime-ul core.