Tagify preset

다른 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 */ }),
    // ...other presets
  ],
})

Tagify 모드

이 preset은 요소에 단일 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 모드를 사용하면 CSS 스타일을 HTML 태그에 임베드할 수 있습니다:

<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는 일반 객체일 수도 있습니다
  extraProperties: { display: 'block' }
})

옵션

prefix

• 타입: string

Tagify variant에 사용할 접두사.

excludedTags

• 타입: string[] | RegExp[]
• 기본값: ['b', /^h\d+$/, 'table']

처리에서 제외할 태그.

extraProperties

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

매치된 규칙에 적용할 추가 CSS 속성.

defaultExtractor

• 타입: boolean
• 기본값: true

기본 추출기 활성화.