标签化预设

为其他预设启用标签化模式。

源代码

安装

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

启用默认提取器。