1---
2name: preset-tagify
3description: Use utilities as HTML tag names
4---
5 
6# Preset Tagify
7 
8Use CSS utilities directly as HTML tag names.
9 
10## Installation
11 
12```ts
13import { defineConfig, presetTagify } from 'unocss'
14 
15export default defineConfig({
16  presets: [
17    presetTagify(),
18  ],
19})
20```
21 
22## Basic Usage
23 
24Instead of:
25 
26```html
27<span class="text-red">red text</span>
28<div class="flex">flexbox</div>
29<span class="i-line-md-emoji-grin"></span>
30```
31 
32Use tag names directly:
33 
34```html
35<text-red>red text</text-red>
36<flex>flexbox</flex>
37<i-line-md-emoji-grin />
38```
39 
40Works exactly the same!
41 
42## With Prefix
43 
44```ts
45presetTagify({
46  prefix: 'un-'
47})
48```
49 
50```html
51<!-- Matched -->
52<un-flex></un-flex>
53 
54<!-- Not matched -->
55<flex></flex>
56```
57 
58## Extra Properties
59 
60Add CSS properties to matched tags:
61 
62```ts
63presetTagify({
64  // Add display: inline-block to icons
65  extraProperties: matched => matched.startsWith('i-')
66    ? { display: 'inline-block' }
67    : {},
68})
69```
70 
71Or apply to all:
72 
73```ts
74presetTagify({
75  extraProperties: { display: 'block' }
76})
77```
78 
79## Options
80 
81```ts
82presetTagify({
83  // Tag prefix
84  prefix: '',
85  
86  // Excluded tags (won't be processed)
87  excludedTags: ['b', /^h\d+$/, 'table'],
88  
89  // Extra CSS properties
90  extraProperties: {},
91  
92  // Enable default extractor
93  defaultExtractor: true,
94})
95```
96 
97## Excluded Tags
98 
99By default, these tags are excluded:
100- `b` (bold)
101- `h1` through `h6` (headings)
102- `table`
103 
104Add your own:
105 
106```ts
107presetTagify({
108  excludedTags: [
109    'b',
110    /^h\d+$/,
111    'table',
112    'article',  // Add custom exclusions
113    /^my-/,     // Exclude tags starting with 'my-'
114  ],
115})
116```
117 
118## Use Cases
119 
120- Quick prototyping
121- Cleaner HTML for simple pages
122- Icon embedding: `<i-carbon-sun />`
123- Semantic-like styling: `<flex-center>`, `<text-red>`
124 
125## Limitations
126 
127- Custom element names must contain a hyphen (HTML spec)
128- Some frameworks may not support all custom elements
129- Utilities without hyphens need the prefix option
130 
131<!-- 
132Source references:
133- https://unocss.dev/presets/tagify
134-->
135