Preset Tagify

Isso habilita o modo tagify para outros presets.

Código Fonte

Instalação

pnpm

pnpm add -D @unocss/preset-tagify

yarn

yarn add -D @unocss/preset-tagify

npm

npm install -D @unocss/preset-tagify

bun

bun add -D @unocss/preset-tagify

import presetTagify from '@unocss/preset-tagify'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetTagify({ /* opções */ }),
    // ...outros presets
  ],
})

Modo Tagify

Este preset pode ser útil quando você precisa aplicar apenas uma única regra unocss a um elemento.

<span class="text-red"> texto vermelho </span>
<div class="flex">flexbox</div>
Estou me sentindo <span class="i-line-md-emoji-grin"></span> hoje!

Com o modo tagify, você pode incorporar estilos CSS em tags HTML:

<text-red> texto vermelho </text-red>
<flex> flexbox </flex>
Estou me sentindo <i-line-md-emoji-grin /> hoje!

O HTML acima funciona exatamente como você esperaria.

Com prefixo

presetTagify({
  prefix: 'un-'
})

<!-- isso será correspondido -->
<un-flex> </un-flex>
<!-- isso não será correspondido -->
<flex> </flex>

Propriedades extras

Você pode injetar propriedades extras nas regras correspondidas:

presetTagify({
  // adiciona display: inline-block aos ícones correspondidos
  extraProperties: matched => matched.startsWith('i-')
    ? { display: 'inline-block' }
    : { }
})

presetTagify({
  // extraProperties também pode ser um objeto simples
  extraProperties: { display: 'block' }
})

Opções

prefix

• Tipo: string

O prefixo a ser usado para a variante tagify.

excludedTags

• Tipo: string[] | RegExp[]
• Padrão: ['b', /^h\d+$/, 'table']

Tags excluídas do processamento.

extraProperties

• Tipo: Record<string, string> | ((matched: string) => Partial<Record<string, string>>)

Propriedades CSS extras para aplicar às regras correspondidas.

defaultExtractor

• Tipo: boolean
• Padrão: true

Habilita o extrator padrão.