@unocss/preset-tagify

@unocss/preset-tagify

Tagify Mode for UnoCSS.

Installation

npm i -D @unocss/preset-tagify

import presetTagify from '@unocss/preset-tagify'

Unocss({
  presets: [
    presetTagify({ /* options */ }),
    // ...other presets
  ],
})

Tagify Mode

This preset can come in handy when you only need a single unocss rule to be apply on an element.

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

With tagify mode, you can embed CSS styles into HTML tags:

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

The HTML above works exactly as you would expect.

With Prefix

presetTagify({
  prefix: 'un-'
})

<!-- this will be matched -->
<un-flex> </un-flex>
<!-- this will not be matched -->
<flex> </flex>

Extra Properties

You can inject extra properties to the matched rules:

presetTagify({
  // adds display: inline-block to matched icons
  extraProperties: matched => matched.startsWith('i-')
    ? { display: 'inline-block' }
    : { }
})
presetTagify({
  // extraProperties can also be a plain object
  extraProperties: { display: 'block' }
})

License

MIT License © 2022-PRESENT Jeff Zou MIT License © 2022-PRESENT Anthony Fu