Runtime

UnoCSS runtime একটি CDN build প্রদান করে যা সরাসরি browser-এ UnoCSS চালায়। এটি DOM changes detect করবে এবং fly-তে styles generate করবে।

Usage

আপনার index.html-এ নিম্নলিখিত line যোগ করুন:

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

Runtime-কে runtime load করার আগে configuration define করে configure করা যেতে পারে:

<!-- define unocss options... -->
<script>
  window.__unocss = {
    rules: [
      // custom rules...
    ],
    presets: [
      // custom presets...
    ],
    // ...
  }
</script>
<!-- ... and then load the runtime -->
<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"></script>

Default হিসাবে, Wind3 preset apply করা হয়।

Runtime preflights নিয়ে আসে না, আপনি যদি style resets চান, আপনি হয় আপনার নিজের যোগ করতে পারেন, অথবা Reset package থেকে একটি ব্যবহার করতে পারেন।

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

Builds

বিভিন্ন use cases-এর জন্য কয়েকটি builds available আছে।

Uno (default)

@unocss/preset-wind3 preset সহ:

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

Attributify

@unocss/preset-wind3 এবং @unocss/preset-attributify presets সহ:

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

Mini

@unocss/preset-mini এবং @unocss/preset-attributify preset সহ:

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

Core

আপনি যদি presets mix এবং match করতে চান, আপনি শুধুমাত্র core runtime load করতে পারেন এবং presets manually assign করতে পারেন। UnoCSS থেকে সমস্ত official presets available। আপনার প্রয়োজনীয়টি core runtime initialize করার আগে load করুন।

<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 */ })

defaults property ব্যবহার করে একটি UnoCSS config provide করা যেতে পারে:

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

initUnocssRuntime({ defaults: config })

Presets esm.sh থেকে import করা যেতে পারে:

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 ready হওয়ার পরে চলে, একটি "flash of unstyled content" (FOUC) থাকতে পারে যা user-কে page-কে unstyled হিসাবে দেখতে পারে।

un-cloak attribute ব্যবহার করুন CSS rules যেমন [un-cloak] { display: none } দিয়ে UnoCSS styles apply না হওয়া পর্যন্ত unstyled element লুকাতে।

css

[un-cloak] {
  display: none;
}

html

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