Transformator Directive

Transformator UnoCSS pentru directivele @apply, @screen și theme(): @unocss/transformer-directives.

Instalare

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 de la '@unocss/transformer-directives'
import { defineConfig } de la 'unocss'

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

TIP

Acest preset este inclus în pachetul unocss, îl puteți importa și de acolo:

import { transformerDirectives } de la 'unocss'

Utilizare

@apply

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

Va fi transformat în:

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

--at-apply

Pentru a fi compatibil cu CSS vanilla, puteți utiliza proprietăți CSS personalizate pentru a înlocui directva @apply: