Tagify preset

Detta aktiverar tagify-läge för andra presets.

Källkod

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

Tagify-läge

Denna preset kan komma till pass när du bara behöver tillämpa en enda UnoCSS-regel på ett element.

<span class="text-red"> röd text </span>
<div class="flex">flexbox</div>
Jag känner mig <span class="i-line-md-emoji-grin"></span> idag!

Med tagify-läge kan du bädda in CSS-stilar i HTML-taggar:

<text-red> röd text </text-red>
<flex> flexbox </flex>
Jag känner mig <i-line-md-emoji-grin /> idag!

HTML:en ovan fungerar precis som du skulle förvänta dig.

Med prefix

presetTagify({
  prefix: 'un-'
})

<!-- detta kommer att matchas -->
<un-flex> </un-flex>
<!-- detta kommer inte att matchas -->
<flex> </flex>

Extra egenskaper

Du kan injicera extra egenskaper till de matchade reglerna:

presetTagify({
  // lägger till display: inline-block till matchade ikoner
  extraProperties: matched => matched.startsWith('i-')
    ? { display: 'inline-block' }
    : { }
})

presetTagify({
  // extraProperties kan också vara ett vanligt objekt
  extraProperties: { display: 'block' }
})

Alternativ

prefix

• Typ: string

Prefixet att använda för tagify-varianten.

excludedTags

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

Taggar exkluderade från bearbetning.

extraProperties

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

Extra CSS-egenskaper att tillämpa på matchade regler.

defaultExtractor

• Typ: boolean
• Standard: true

Aktivera standardextraktor.