निर्देश ट्रांसफॉर्मर

@apply, @screen और theme() निर्देशों के लिए UnoCSS ट्रांसफॉर्मर: @unocss/transformer-directives।

इंस्टॉलेशन

pnpm

pnpm add -D @unocss/transformer-directives

yarn

yarn add -D @unocss/transformer-directives

npm

npm install -D @unocss/transformer-directives

bun

bun add -D @unocss/transformer-directives

import transformerDirectives from '@unocss/transformer-directives'
import { defineConfig } from 'unocss'

export default defineConfig({
  // ...
  transformers: [
    transformerDirectives(),
  ],
})

TIP

यह प्रीसेट unocss पैकेज में शामिल है, आप इसे वहाँ से भी आयात कर सकते हैं:

import { transformerDirectives } from 'unocss'

उपयोग

@apply

.custom-div {
  @apply text-center my-0 font-medium;
}

इसके लिए रूपांतरित किया जाएगा:

.custom-div {
  margin-top: 0rem;
  margin-bottom: 0rem;
  text-align: center;
  font-weight: 500;
}

--at-apply

वेनिला CSS के साथ संगत होने के लिए, आप @apply निर्देश को बदलने के लिए CSS कस्टम प्रॉपर्टी का उपयोग कर सकते हैं:

.custom-div {
  --at-apply: text-center my-0 font-medium;
}

यह सुविधा कुछ उपनामों के साथ डिफ़ॉल्ट रूप से सक्षम है, जिसे आप कॉन्फ़िगर या अक्षम कर सकते हैं:

transformerDirectives({
  // the defaults
  applyVariable: ['--at-apply', '--uno-apply', '--uno'],
  // or disable with:
  // applyVariable: false
})

उद्धरण जोड़ना

: के साथ नियमों का उपयोग करने के लिए, आपको पूरे मान को उद्धृत करना होगा: