---
name: unocss-extracting
description: How UnoCSS extracts utilities from source code
---

# Extracting

UnoCSS searches for utility usages in your codebase and generates CSS on-demand.

## Content Sources

### Pipeline Extraction (Vite/Webpack)

Most efficient - extracts from build tool pipeline.

**Default file types:** `.jsx`, `.tsx`, `.vue`, `.md`, `.html`, `.svelte`, `.astro`, `.marko`

**Not included by default:** `.js`, `.ts`

```ts
export default defineConfig({
  content: {
    pipeline: {
      include: [
        /\.(vue|svelte|[jt]sx|mdx?|astro|html)($|\?)/,
        'src/**/*.{js,ts}', // Add js/ts
      ],
    },
  },
});
```

### Filesystem Extraction

For files not in build pipeline:

```ts
export default defineConfig({
  content: {
    filesystem: ['src/**/*.php', 'public/*.html'],
  },
});
```

### Inline Text Extraction

```ts
export default defineConfig({
  content: {
    inline: [
      '<div class="p-4 text-red">Some text</div>',
      async () => (await fetch('https://example.com')).text(),
    ],
  },
});
```

## Magic Comments

### @unocss-include

Force scan a file:

```ts
// @unocss-include
export const classes = {
  active: 'bg-primary text-white',
};
```

### @unocss-ignore

Skip entire file:

```ts
// @unocss-ignore
```

### @unocss-skip-start / @unocss-skip-end

Skip specific blocks:

```html
<p class="text-green">Extracted</p>
<!-- @unocss-skip-start -->
<p class="text-red">NOT extracted</p>
<!-- @unocss-skip-end -->
```

## Limitations

UnoCSS works at **build time** - dynamic classes don't work:

```html
<!-- Won't work! -->
<div class="p-${size}"></div>
```

### Solutions

**1. Safelist** - Pre-generate known values:

```ts
safelist: ['p-1', 'p-2', 'p-3', 'p-4'];
```

**2. Static mapping** - List combinations statically:

```ts
const colors = {
  red: 'text-red border-red',
  blue: 'text-blue border-blue',
};
```

**3. Runtime** - Use `@unocss/runtime` for true runtime generation.

## Custom Extractors

```ts
extractors: [
  {
    name: 'my-extractor',
    extract({ code }) {
      return code.match(/class:[\w-]+/g) || [];
    },
  },
];
```

<!--
Source references:
- https://unocss.dev/guide/extracting
-->
