Preset Tagify

Esto habilita el modo tagify para otros presets.

Código Fuente

Instalación

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({ /* opciones */ }),
    // ...otros presets
  ],
})

Modo Tagify

Este preset puede ser útil cuando solo necesitas aplicar una sola regla de unocss a un elemento.

<span class="text-red"> texto rojo </span>
<div class="flex">flexbox</div>
¡Me siento <span class="i-line-md-emoji-grin"></span> hoy!

Con el modo tagify, puedes incrustar estilos CSS en etiquetas HTML:

<text-red> texto rojo </text-red>
<flex> flexbox </flex>
¡Me siento <i-line-md-emoji-grin /> hoy!

El HTML de arriba funciona exactamente como esperarías.

Con prefijo

presetTagify({
  prefix: 'un-'
})

<!-- esto será coincidido -->
<un-flex> </un-flex>
<!-- esto no será coincidido -->
<flex> </flex>

Propiedades extra

Puedes inyectar propiedades extra a las reglas coincidentes:

presetTagify({
  // añade display: inline-block a iconos coincidentes
  extraProperties: matched => matched.startsWith('i-')
    ? { display: 'inline-block' }
    : { }
})

presetTagify({
  // extraProperties también puede ser un objeto plano
  extraProperties: { display: 'block' }
})

Opciones

prefix

• Tipo: string

El prefijo a usar para la variante tagify.

excludedTags

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

Etiquetas excluidas del procesamiento.

extraProperties

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

Propiedades CSS extra para aplicar a reglas coincidentes.

defaultExtractor

• Tipo: boolean
• Predeterminado: true

Habilitar extractor predeterminado.