Runtime

UnoCSS runtime tillhandahåller en CDN-build som kör UnoCSS direkt i webbläsaren. Den kommer att upptäcka DOM-ändringar och generera stilarna i farten.

Användning

Lägg till följande rad i din index.html:

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

Runtime kan konfigureras genom att definiera konfigurationen innan runtime laddas:

<!-- definiera unocss-alternativ... -->
<script>
  window.__unocss = {
    rules: [
      // anpassade regler...
    ],
    presets: [
      // anpassade presets...
    ],
    // ...
  }
</script>
<!-- ... och ladda sedan runtime -->
<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"></script>

Som standard kommer Wind3 preset att tillämpas.

Runtime kommer inte med preflights, om du vill ha stil-återställningar kan du antingen lägga till dina egna, eller använda en från Reset-paketet.

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

Byggen

Flera byggen finns tillgängliga för olika användningsfall.

Uno (standard)

Med @unocss/preset-wind3 preset:

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

Attributify

Med @unocss/preset-wind3 och @unocss/preset-attributify presets:

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

Mini

Med @unocss/preset-mini och @unocss/preset-attributify preset:

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

Core

Om du behöver blanda och matcha presets kan du ladda endast core-runtime och tilldela presets manuellt. Alla officiella presets från UnoCSS finns tillgängliga. Ladda den du behöver innan du initierar 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>

Bundler-användning

npm i @unocss/runtime

import initUnocssRuntime from '@unocss/runtime'

initUnocssRuntime({ /* alternativ */ })

En UnoCSS-konfiguration kan tillhandahållas med hjälp av defaults-egenskapen:

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

initUnocssRuntime({ defaults: config })

Presets kan importeras från 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/' })],
})

Förhindra FOUC

Eftersom UnoCSS körs efter att DOM:en är redo, kan det förekomma en "flash of unstyled content" (FOUC) vilket kan få användaren att se sidan som ostylad.

Använd un-cloak-attributet med CSS-regler som [un-cloak] { display: none } för att dölja det ostylade elementet tills UnoCSS tillämpar stilarna för det.

css

[un-cloak] {
  display: none;
}

html

<div class="text-blue-500" un-cloak>Denna text kommer endast att vara synlig i blå färg.</div>