Preset Tagify

Ceci active le mode tagify pour d'autres presets.

Code Source

Installation

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

Mode Tagify

Ce preset peut être utile quand vous n'avez besoin d'appliquer qu'une seule règle unocss à un élément.

<span class="text-red"> texte rouge </span>
<div class="flex">flexbox</div>
Je me sens <span class="i-line-md-emoji-grin"></span> aujourd'hui !

Avec le mode tagify, vous pouvez intégrer les styles CSS dans les balises HTML :

<text-red> texte rouge </text-red>
<flex> flexbox </flex>
Je me sens <i-line-md-emoji-grin /> aujourd'hui !

Le HTML ci-dessus fonctionne exactement comme vous l'attendez.

Avec préfixe

presetTagify({
  prefix: 'un-'
})

<!-- ceci sera reconnu -->
<un-flex> </un-flex>
<!-- ceci ne sera pas reconnu -->
<flex> </flex>

Propriétés supplémentaires

Vous pouvez injecter des propriétés supplémentaires aux règles reconnues :

presetTagify({
  // ajoute display: inline-block aux icônes reconnues
  extraProperties: matched => matched.startsWith('i-')
    ? { display: 'inline-block' }
    : { }
})

presetTagify({
  // extraProperties peut aussi être un objet simple
  extraProperties: { display: 'block' }
})

Options

prefix

• Type: string

Le préfixe à utiliser pour la variante tagify.

excludedTags

• Type: string[] | RegExp[]
• Défaut: ['b', /^h\d+$/, 'table']

Balises exclues du traitement.

extraProperties

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

Propriétés CSS supplémentaires à appliquer aux règles reconnues.

defaultExtractor

• Type: boolean
• Défaut: true

Active l'extracteur par défaut.