Sv Unocss

Svelte CLI add-on for integrating UnoCSS into Svelte project

sv community add-on: @sepagian/sv-unocss

[!IMPORTANT] Svelte maintainers have not reviewed community add-ons for malicious code. Use at your discretion

npx sv add @sepagian/sv-unocss

Or with specific options:

npx sv add @sepagian/sv-unocss="presets:wind4,attributify,icons transformers:directives,variant-group extractors:svelte"

UnoCSS Vite plugin (unocss/vite) added to vite.config.ts
Svelte preprocessor (@unocss/svelte-scoped/preprocess) added to svelte.config.js (SvelteKit only)
uno.config.ts generated based on your selected presets, transformers, and extractors
uno.css import in your root layout/component
pnpm build-allow configured for lightningcss (if using pnpm)

All options are optional — pick what you need.

Value	Description	Package
`wind4`	Tailwind4 compact preset	built-in
`wind3`	Tailwind/Windi CSS compact preset	built-in
`mini`	Minimal essential rules	built-in
`attributify`	Enable attributify mode	built-in
`icons`	Pure CSS icons via Iconify	built-in
`typography`	Typography utilities	built-in
`web-fonts`	Web fonts (Google Fonts, etc.)	built-in
`tagify`	Tagify mode	built-in
`rem-to-px`	Converts rem to px	`@unocss/preset-rem-to-px`
`legacy-compat`	Legacy browser compatibility	`@unocss/preset-legacy-compat`

Value	Description	Package
`directives`	`@apply`, `@screen`, `theme()` support	built-in
`variant-group`	`hover:(bg-red text-white)` syntax	built-in
`compile-class`	`:uno:` compile class groups	built-in
`attributify-jsx`	Valueless attributify in JSX/TSX	built-in

Value	Description	Package
`svelte`	Extract from `class:` directive	`@unocss/extractor-svelte`
`pug`	Extract from Pug templates	`@unocss/extractor-pug`
`mdc`	Extract from Markdown Components	`@unocss/extractor-mdc`

MIT