Tagify preset

他のプリセットでtagifyモードを有効にします。

ソースコード

インストール

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 */ }),
    // ...他のプリセット
  ],
})

Tagifyモード

このプリセットは、要素に単一のunocssルールだけを適用したい場合に便利です。

<span class="text-red"> red text </span>
<div class="flex">flexbox</div>
I'm feeling <span class="i-line-md-emoji-grin"></span> today!

tagifyモードを使うと、HTMLタグにCSSスタイルを埋め込むことができます：

<text-red> red text </text-red>
<flex> flexbox </flex>
I'm feeling <i-line-md-emoji-grin /> today!

上記のHTMLは期待通りに動作します。

プレフィックス付き

presetTagify({
  prefix: 'un-'
})

<!-- これはマッチします -->
<un-flex> </un-flex>
<!-- これはマッチしません -->
<flex> </flex>

追加プロパティ

マッチしたルールに追加のプロパティを注入できます：

presetTagify({
  // マッチしたアイコンにdisplay: inline-blockを追加
  extraProperties: matched => matched.startsWith('i-')
    ? { display: 'inline-block' }
    : { }
})

presetTagify({
  // extraPropertiesはプレーンなオブジェクトでもOK
  extraProperties: { display: 'block' }
})

オプション

prefix

• 型: string

tagifyバリアントで使用するプレフィックス。

excludedTags

• 型: string[] | RegExp[]
• デフォルト: ['b', /^h\d+$/, 'table']

処理から除外するタグ。

extraProperties

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

マッチしたルールに適用する追加のCSSプロパティ。

defaultExtractor

• 型: boolean
• デフォルト: true

デフォルトのエクストラクターを有効にします。