Runtime

Runtime UnoCSS zapewnia kompilację CDN, która uruchamia UnoCSS bezpośrednio w przeglądarce. Wykryje zmiany w DOM i wygeneruje style w locie.

Użycie

Dodaj następującą linię do swojego index.html:

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

Runtime może być skonfigurowany poprzez zdefiniowanie konfiguracji przed załadowaniem runtime:

<!-- zdefiniuj opcje unocss... -->
<script>
  window.__unocss = {
    rules: [
      // niestandardowe reguły...
    ],
    presets: [
      // niestandardowe presety...
    ],
    // ...
  }
</script>
<!-- ... a następnie załaduj runtime -->
<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"></script>

Domyślnie stosowany jest preset Wind3.

Runtime nie jest dostarczany z preflights, jeśli chcesz mieć reset stylów, możesz dodać własny lub użyć jednego z pakietu Reset.

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

Kompilacje

Dostępnych jest kilka kompilacji dla różnych przypadków użycia.

Uno (domyślny)

Z presetem @unocss/preset-wind3:

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

Attributify

Z presetami @unocss/preset-wind3 i @unocss/preset-attributify:

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

Mini

Z presetami @unocss/preset-mini i @unocss/preset-attributify:

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

Core

Jeśli musisz mieszać i dopasowywać presety, możesz załadować tylko rdzeń runtime i przypisać presety ręcznie. Wszystkie oficjalne presety z UnoCSS są dostępne. Załaduj ten, którego potrzebujesz przed inicjalizacją rdzenia 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 Usage

npm i @unocss/runtime

import initUnocssRuntime from '@unocss/runtime'

initUnocssRuntime({ /* options */ })

A UnoCSS config can be provided using the defaults property:

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

initUnocssRuntime({ defaults: config })

Presets can be imported from 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/' })],
})

Preventing FOUC

Since UnoCSS runs after the DOM is ready, there can be a "flash of unstyled content" (FOUC) which may leads the user to see the page as unstyled.

Use un-cloak attribute with CSS rules such as [un-cloak] { display: none } to hide the unstyled element until UnoCSS applies the styles for it.

css

[un-cloak] {
  display: none;
}

html

<div class="text-blue-500" un-cloak>This text will only be visible in blue color.</div>