Skip to content
On this page

Svelte Extractor

Supports extracting classes from class: directive.

html
<div class:text-orange-400={foo} />
<div class:text-orange-400={foo} />

Will be extracted as text-orange-400 and generates:

css
.text-orange-400 {
  color: #f6993f;
}
.text-orange-400 {
  color: #f6993f;
}

Installation

bash
pnpm add -D @unocss/extractor-svelte
pnpm add -D @unocss/extractor-svelte
bash
yarn add -D @unocss/extractor-svelte
yarn add -D @unocss/extractor-svelte
bash
npm install -D @unocss/extractor-svelte
npm install -D @unocss/extractor-svelte
ts
// uno.config.js
import { defineConfig } from 'unocss'
import extractorSvelte from '@unocss/extractor-svelte'

export default defineConfig({
  extractors: [
    extractorSvelte(),
  ],
})
// uno.config.js
import { defineConfig } from 'unocss'
import extractorSvelte from '@unocss/extractor-svelte'

export default defineConfig({
  extractors: [
    extractorSvelte(),
  ],
})

Released under the MIT License.