標籤化預設

為其他預設啟用標籤化模式。

源代碼

安裝

pnpm

pnpm add -D @unocss/preset-tagify

yarn

yarn add -D @unocss/preset-tagify

npm

npm install -D @unocss/preset-tagify

// uno.config.ts
import { defineConfig } from 'unocss'
import presetTagify from '@unocss/preset-tagify'

export default defineConfig({
  presets: [
    presetTagify({ /* 選項 */ }),
    // ...其他預設
  ],
})

標籤化模式

當你只需要對一個元素應用單個 UnoCSS 規則時，這個預設會很有用。

<span class="text-red"> 紅色文本 </span>
<div class="flex"> 彈性盒 </div>
我今天感覺 <span class="i-line-md-emoji-grin"></span>！

使用標籤化模式，你可以將 CSS 樣式嵌入到 HTML 標籤中：

<text-red> 紅色文本 </text-red>
<flex> 彈性盒 </flex>
我今天感覺 <i-line-md-emoji-grin /> 很開心！

上面的 HTML 會完全按照你的預期工作。

使用前綴

presetTagify({
  prefix: 'un-'
})

<!-- 這將被匹配 -->
<un-flex> </un-flex>
<!-- 這將不會被匹配 -->
<flex> </flex>

額外屬性

你可以為匹配的規則注入額外的屬性：

presetTagify({
  // 為匹配的圖標添加 display: inline-block
  extraProperties: matched => matched.startsWith('i-')
    ? { display: 'inline-block' }
    : { }
})

presetTagify({
  // extraProperties 也可以是一個普通對象
  extraProperties: { display: 'block' }
})

選項

prefix

• 類型： string

用於標籤化變體的前綴。

excludedTags

• 類型： string[] | RegExp[]
• 默認值： ['b', /^h\d+$/, 'table']

排除在處理之外的標籤。

extraProperties

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

應用於匹配規則的額外 CSS 屬性。

defaultExtractor

• 類型： boolean
• 默認值： true

啟用默認提取器。