1---
2name: unocss-extracting
3description: How UnoCSS extracts utilities from source code
4---
5 
6# Extracting
7 
8UnoCSS searches for utility usages in your codebase and generates CSS on-demand.
9 
10## Content Sources
11 
12### Pipeline Extraction (Vite/Webpack)
13 
14Most efficient - extracts from build tool pipeline.
15 
16**Default file types:** `.jsx`, `.tsx`, `.vue`, `.md`, `.html`, `.svelte`, `.astro`, `.marko`
17 
18**Not included by default:** `.js`, `.ts`
19 
20```ts
21export default defineConfig({
22  content: {
23    pipeline: {
24      include: [
25        /\.(vue|svelte|[jt]sx|mdx?|astro|html)($|\?)/,
26        'src/**/*.{js,ts}', // Add js/ts
27      ],
28    },
29  },
30})
31```
32 
33### Filesystem Extraction
34 
35For files not in build pipeline:
36 
37```ts
38export default defineConfig({
39  content: {
40    filesystem: [
41      'src/**/*.php',
42      'public/*.html',
43    ],
44  },
45})
46```
47 
48### Inline Text Extraction
49 
50```ts
51export default defineConfig({
52  content: {
53    inline: [
54      '<div class="p-4 text-red">Some text</div>',
55      async () => (await fetch('https://example.com')).text(),
56    ],
57  },
58})
59```
60 
61## Magic Comments
62 
63### @unocss-include
64 
65Force scan a file:
66 
67```ts
68// @unocss-include
69export const classes = {
70  active: 'bg-primary text-white',
71}
72```
73 
74### @unocss-ignore
75 
76Skip entire file:
77 
78```ts
79// @unocss-ignore
80```
81 
82### @unocss-skip-start / @unocss-skip-end
83 
84Skip specific blocks:
85 
86```html
87<p class="text-green">Extracted</p>
88<!-- @unocss-skip-start -->
89<p class="text-red">NOT extracted</p>
90<!-- @unocss-skip-end -->
91```
92 
93## Limitations
94 
95UnoCSS works at **build time** - dynamic classes don't work:
96 
97```html
98<!-- Won't work! -->
99<div class="p-${size}"></div>
100```
101 
102### Solutions
103 
104**1. Safelist** - Pre-generate known values:
105 
106```ts
107safelist: ['p-1', 'p-2', 'p-3', 'p-4']
108```
109 
110**2. Static mapping** - List combinations statically:
111 
112```ts
113const colors = {
114  red: 'text-red border-red',
115  blue: 'text-blue border-blue',
116}
117```
118 
119**3. Runtime** - Use `@unocss/runtime` for true runtime generation.
120 
121## Custom Extractors
122 
123```ts
124extractors: [
125  {
126    name: 'my-extractor',
127    extract({ code }) {
128      return code.match(/class:[\w-]+/g) || []
129    },
130  },
131]
132```
133 
134<!-- 
135Source references:
136- https://unocss.dev/guide/extracting
137-->
138