Runtime

Il runtime UnoCSS fornisce un build CDN che esegue UnoCSS direttamente nel browser. Rileverà le modifiche al DOM e genererà gli stili al volo.

Utilizzo

Aggiungi la seguente riga al tuo index.html:

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

Il runtime può essere configurato definendo la configurazione prima di caricare il runtime:

<!-- definisci le opzioni unocss... -->
<script>
  window.__unocss = {
    rules: [
      // regole personalizzate...
    ],
    presets: [
      // preset personalizzati...
    ],
    // ...
  }
</script>
<!-- ... e poi carica il runtime -->
<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"></script>

Per impostazione predefinita, viene applicato il preset Wind3.

Il runtime non viene fornito con preflights, se vuoi avere reset di stile, puoi aggiungere i tuoi, o usare uno dal pacchetto Reset.

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

Build

Sono disponibili diversi build per diversi casi d'uso.

Uno (predefinito)

Con il preset @unocss/preset-wind3:

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

Attributify

Con i preset @unocss/preset-wind3 e @unocss/preset-attributify:

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

Mini

Con il preset @unocss/preset-mini e @unocss/preset-attributify:

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

Core

Se hai bisogno di mescolare e abbinare preset, puoi caricare solo il runtime core e assegnare i preset manualmente. Tutti i preset ufficiali di UnoCSS sono disponibili. Carica quello di cui hai bisogno prima di inizializzare il runtime core.

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

Utilizzo con Bundler

npm i @unocss/runtime

import initUnocssRuntime from '@unocss/runtime'

initUnocssRuntime({ /* opzioni */ })

Una configurazione UnoCSS può essere fornita usando la proprietà defaults:

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

initUnocssRuntime({ defaults: config })

I preset possono essere importati da 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/' })],
})

Prevenire FOUC

Poiché UnoCSS viene eseguito dopo che il DOM è pronto, può esserci un "flash of unstyled content" (FOUC) che può portare l'utente a vedere la pagina come non stilizzata.

Usa l'attributo un-cloak con regole CSS come [un-cloak] { display: none } per nascondere l'elemento non stilizzato fino a quando UnoCSS applica gli stili per esso.

css

[un-cloak] {
  display: none;
}

html

<div class="text-blue-500" un-cloak>Questo testo sarà visibile solo in blu.</div>