Runtime

UnoCSS çalışma zamanı, UnoCSS'i doğrudan tarayıcıda çalıştıran bir CDN derlemesi sağlar. DOM değişikliklerini algılayacak ve stilleri anında oluşturacaktır.

Usage

index.html'nize aşağıdaki satırı ekleyin:

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

Çalışma zamanı, çalışma zamanını yüklemeden önce yapılandırmayı tanımlayarak yapılandırılabilir:

<!-- unocss seçeneklerini tanımla... -->
<script>
  window.__unocss = {
    rules: [
      // özel kurallar...
    ],
    presets: [
      // özel preset'ler...
    ],
    // ...
  }
</script>
<!-- ... ve ardından çalışma zamanını yükle -->
<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"></script>

Varsayılan olarak, Wind3 preset uygulanır.

Çalışma zamanı preflight'larla birlikte gelmez, stil sıfırlamaları istiyorsanız, kendi sıfırlamanızı ekleyebilir veya Reset paketinden birini kullanabilirsiniz.

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

Builds

Farklı kullanım durumları için çeşitli derlemeler mevcuttur.

Uno (varsayılan)

@unocss/preset-wind3 preset'i ile:

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

Attributify

@unocss/preset-wind3 ve @unocss/preset-attributify preset'leri ile:

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

Mini

@unocss/preset-mini ve @unocss/preset-attributify preset'i ile:

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

Core

Preset'leri karıştırıp eşleştirmeniz gerekiyorsa, yalnızca çekirdek çalışma zamanını yükleyebilir ve preset'leri manuel olarak atayabilirsiniz. UnoCSS'ten tüm resmi preset'ler mevcuttur. Çekirdek çalışma zamanını başlatmadan önce ihtiyacınız olanı yükleyin.

<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({ /* seçenekler */ })

Bir UnoCSS yapılandırması defaults özelliği kullanılarak sağlanabilir:

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

initUnocssRuntime({ defaults: config })

Preset'ler esm.sh'den içe aktarılabilir:

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

UnoCSS DOM hazır olduktan sonra çalıştığından, "stil uygulanmamış içeriğin yanıp sönmesi" (FOUC) olabilir ve bu da kullanıcının sayfayı stillendirilmemiş olarak görmesine neden olabilir.

UnoCSS stillerini uygulayana kadar stillendirilmemiş öğeyi gizlemek için [un-cloak] { display: none } gibi CSS kurallarıyla un-cloak özniteliğini kullanın.

css

[un-cloak] {
  display: none;
}

html

<div class="text-blue-500" un-cloak>Bu metin yalnızca mavi renkte görünecektir.</div>