Runtime

Le runtime UnoCSS fournit une version CDN qui exécute UnoCSS directement dans le navigateur. Il détecte les changements du DOM et génère les styles à la volée.

Utilisation

Ajoutez la ligne suivante à votre index.html :

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

Le runtime peut être configuré en définissant la configuration avant de charger le runtime :

<!-- définir les options unocss... -->
<script>
  window.__unocss = {
    rules: [
      // règles personnalisées...
    ],
    presets: [
      // presets personnalisés...
    ],
    // ...
  }
</script>
<!-- ... puis charger le runtime -->
<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"></script>

Par défaut, le preset Wind3 est appliqué.

Le runtime ne fournit pas de preflights, si vous souhaitez réinitialiser les styles, vous pouvez ajouter les vôtres ou utiliser ceux du package Reset.

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

Builds

Plusieurs builds sont disponibles selon les cas d'usage.

Uno (par défaut)

Avec le preset @unocss/preset-wind3 :

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

Attributify

Avec les presets @unocss/preset-wind3 et @unocss/preset-attributify :

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

Mini

Avec les presets @unocss/preset-mini et @unocss/preset-attributify :

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

Core

Si vous souhaitez combiner différents presets, vous pouvez charger uniquement le runtime core et assigner les presets manuellement. Tous les presets officiels de UnoCSS sont disponibles. Chargez ceux dont vous avez besoin avant d'initialiser le 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>

Utilisation avec un bundler

npm i @unocss/runtime

import initUnocssRuntime from '@unocss/runtime'

initUnocssRuntime({ /* options */ })

Une configuration UnoCSS peut être fournie via la propriété defaults :

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

initUnocssRuntime({ defaults: config })

Les presets peuvent être importés depuis 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/' })],
})

Prévenir le FOUC

Comme UnoCSS s'exécute après que le DOM soit prêt, il peut y avoir un "flash de contenu non stylisé" (FOUC) qui peut amener l'utilisateur à voir la page sans style.

Utilisez l'attribut un-cloak avec des règles CSS comme [un-cloak] { display: none } pour masquer l'élément non stylisé jusqu'à ce que UnoCSS applique les styles.

css

[un-cloak] {
  display: none;
}

html

<div class="text-blue-500" un-cloak>Ce texte ne sera visible en bleu qu'après le chargement du style.</div>