/unocss

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

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:

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

Inline Text Extraction

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:

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

@unocss-ignore

Skip entire file:

// @unocss-ignore

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

Skip specific blocks:

<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:

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

Solutions

1. Safelist - Pre-generate known values:

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

2. Static mapping - List combinations statically:

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

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

Custom Extractors

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