रनटाइम

UnoCSS रनटाइम एक CDN बिल्ड प्रदान करता है जो ब्राउज़र में ही UnoCSS चलाता है। यह DOM परिवर्तनों का पता लगाएगा और फ्लाई पर स्टाइल उत्पन्न करेगा।

उपयोग

अपने index.html में निम्नलिखित पंक्ति जोड़ें:

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

रनटाइम को रनटाइम लोड करने से पहले कॉन्फ़िगरेशन परिभाषित करके कॉन्फ़िगर किया जा सकता है:

<!-- 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>

डिफ़ॉल्ट रूप से, Wind3 प्रीसेट लागू किया जाता है।

रनटाइम प्रीफ्लाइट्स के साथ नहीं आता है, यदि आप स्टाइल रीसेट चाहते हैं, तो आप या तो अपना स्वयं का जोड़ सकते हैं, या रीसेट पैकेज से का उपयोग कर सकते हैं।

<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" />

बिल्ड्स

विभिन्न उपयोग मामलों के लिए कई बिल्ड उपलब्ध हैं।

Uno (डिफ़ॉल्ट)

@unocss/preset-wind3 प्रीसेट के साथ:

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

एट्रिब्यूटिफ़ाई

@unocss/preset-wind3 और @unocss/preset-attributify प्रीसेट्स के साथ:

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

मिनी

@unocss/preset-mini और @unocss/preset-attributify प्रीसेट के साथ:

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

कोर

यदि आपको प्रीसेट्स को मिलाना और मैच करने की आवश्यकता है, तो आप केवल कोर रनटाइम लोड कर सकते हैं और प्रीसेट्स को मैन्युअली असाइन कर सकते हैं। UnoCSS के सभी आधिकारिक प्रीसेट्स उपलब्ध हैं। कोर रनटाइम को आरंभ करने से पहले आपको जो चाहिए उसे लोड करें।

<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>

बंडलर उपयोग

npm i @unocss/runtime

import initUnocssRuntime from '@unocss/runtime'

initUnocssRuntime({ /* options */ })

defaults प्रॉपर्टी का उपयोग करके UnoCSS कॉन्फ़िगरेशन प्रदान किया जा सकता है:

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

initUnocssRuntime({ defaults: config })

प्रीसेट्स को 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/' })],
})

FOUC को रोकना

चूंकि UnoCSS DOM के तैयार होने के बाद चलता है, "अनस्टाइल्ड कंटेंट का फ्लैश" (FOUC) हो सकता है जिससे उपयोगकर्ता पेज को अनस्टाइल्ड के रूप में देख सकता है।

अनस्टाइल्ड एलिमेंट को तब तक छिपाने के लिए [un-cloak] { display: none } जैसे CSS नियमों के साथ un-cloak विशेषता का उपयोग करें जब तक कि UnoCSS इसके लिए स्टाइल लागू नहीं कर देता।

css

[un-cloak] {
  display: none;
}

html

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