Tagify Preset

Dies aktiviert den Tagify-Modus für andere Presets.

Quellcode

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({ /* Optionen */ }),
    // ...andere Presets
  ],
})

Tagify-Modus

Dieses Preset kann nützlich sein, wenn Sie nur eine einzelne UnoCSS-Regel auf ein Element anwenden müssen.

<span class="text-red"> roter Text </span>
<div class="flex">flexbox</div>
Ich fühle mich heute <span class="i-line-md-emoji-grin"></span>!

Mit dem Tagify-Modus können Sie CSS-Styles in HTML-Tags einbetten:

<text-red> roter Text </text-red>
<flex> flexbox </flex>
Ich fühle mich heute <i-line-md-emoji-grin />!

Das obige HTML funktioniert genau wie Sie es erwarten würden.

Mit Präfix

presetTagify({
  prefix: 'un-'
})

<!-- dies wird abgeglichen -->
<un-flex> </un-flex>
<!-- dies wird nicht abgeglichen -->
<flex> </flex>

Zusätzliche Eigenschaften

Sie können zusätzliche Eigenschaften zu den abgeglichenen Regeln injizieren:

presetTagify({
  // fügt display: inline-block zu abgeglichenen Icons hinzu
  extraProperties: matched => matched.startsWith('i-')
    ? { display: 'inline-block' }
    : { }
})

presetTagify({
  // extraProperties kann auch ein einfaches Objekt sein
  extraProperties: { display: 'block' }
})

Optionen

prefix

• Typ: string

Das Präfix, das für die Tagify-Variante verwendet werden soll.

excludedTags

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

Von der Verarbeitung ausgeschlossene Tags.

extraProperties

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

Zusätzliche CSS-Eigenschaften, die auf abgeglichene Regeln angewendet werden sollen.

defaultExtractor

• Typ: boolean
• Standard: true

Standard-Extractor aktivieren.