---
name: preset-tagify
description: Use utilities as HTML tag names
---
# Preset Tagify
Use CSS utilities directly as HTML tag names.
## Installation
```ts
import { defineConfig, presetTagify } from 'unocss'
export default defineConfig({
presets: [
presetTagify(),
],
})
```
## Basic Usage
Instead of:
```html
red text
flexbox
```
Use tag names directly:
```html
red text
flexbox
```
Works exactly the same!
## With Prefix
```ts
presetTagify({
prefix: 'un-'
})
```
```html
```
## Extra Properties
Add CSS properties to matched tags:
```ts
presetTagify({
// Add display: inline-block to icons
extraProperties: matched => matched.startsWith('i-')
? { display: 'inline-block' }
: {},
})
```
Or apply to all:
```ts
presetTagify({
extraProperties: { display: 'block' }
})
```
## Options
```ts
presetTagify({
// Tag prefix
prefix: '',
// Excluded tags (won't be processed)
excludedTags: ['b', /^h\d+$/, 'table'],
// Extra CSS properties
extraProperties: {},
// Enable default extractor
defaultExtractor: true,
})
```
## Excluded Tags
By default, these tags are excluded:
- `b` (bold)
- `h1` through `h6` (headings)
- `table`
Add your own:
```ts
presetTagify({
excludedTags: [
'b',
/^h\d+$/,
'table',
'article', // Add custom exclusions
/^my-/, // Exclude tags starting with 'my-'
],
})
```
## Use Cases
- Quick prototyping
- Cleaner HTML for simple pages
- Icon embedding: ``
- Semantic-like styling: ``, ``
## Limitations
- Custom element names must contain a hyphen (HTML spec)
- Some frameworks may not support all custom elements
- Utilities without hyphens need the prefix option