Runtime

UnoCSS Runtime bietet einen CDN-Build, der UnoCSS direkt im Browser ausführt. Es erkennt DOM-Änderungen und generiert die Styles dynamisch.

Verwendung

Fügen Sie die folgende Zeile zu Ihrer index.html hinzu:

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

Die Runtime kann konfiguriert werden, indem die Konfiguration vor dem Laden der Runtime definiert wird:

<!-- unocss Optionen definieren... -->
<script>
  window.__unocss = {
    rules: [
      // benutzerdefinierte Regeln...
    ],
    presets: [
      // benutzerdefinierte Presets...
    ],
    // ...
  }
</script>
<!-- ... und dann die Runtime laden -->
<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"></script>

Standardmäßig wird das Wind3 Preset angewendet.

Die Runtime kommt ohne Preflights. Wenn Sie Style-Resets haben möchten, können Sie entweder Ihre eigenen hinzufügen oder eines aus dem Reset Paket verwenden.

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

Builds

Mehrere Builds sind für verschiedene Anwendungsfälle verfügbar.

Uno (Standard)

Mit @unocss/preset-wind3 Preset:

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

Attributify

Mit @unocss/preset-wind3 und @unocss/preset-attributify Presets:

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

Mini

Mit @unocss/preset-mini und @unocss/preset-attributify Preset:

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

Core

Wenn Sie Presets mischen und abgleichen müssen, können Sie nur die Core-Runtime laden und die Presets manuell zuweisen. Alle offiziellen Presets von UnoCSS sind verfügbar. Laden Sie die, die Sie benötigen, bevor Sie die Core-Runtime initialisieren.

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

npm i @unocss/runtime

import initUnocssRuntime from '@unocss/runtime'

initUnocssRuntime({ /* Optionen */ })

Eine UnoCSS-Konfiguration kann über die defaults Eigenschaft bereitgestellt werden:

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

initUnocssRuntime({ defaults: config })

Presets können von esm.sh importiert werden:

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 verhindern

Da UnoCSS nach dem DOM-Bereit ausgeführt wird, kann es einen "Flash of Unstyled Content" (FOUC) geben, der dazu führt, dass der Benutzer die Seite als ungestylt sieht.

Verwenden Sie das un-cloak Attribut mit CSS-Regeln wie [un-cloak] { display: none }, um das ungestylte Element zu verbergen, bis UnoCSS die Styles dafür anwendet.

css

[un-cloak] {
  display: none;
}

html

<div class="text-blue-500" un-cloak>Dieser Text wird nur in blauer Farbe sichtbar sein.</div>