1️⃣ Add unocss to Svelte

This is an adder for svelte-add; you should read its README before continuing here.

➕ Adding unocss

This adder's codename is unocss, and can be used like so:

npx svelte-add@latest unocss

🏞 Supported environments

This adder supports SvelteKit and Vite-powered Svelte apps (all the environments svelte-add currently supports).

⚙️ Options

• uno (default true): whether or not to set up the attributify-preset.

• mini (default false): whether or not to set up the mini-preset.

• windi (default false): whether or not to set up the windi-preset.

• attributify (default false): whether or not to set up the attributify-preset.

• icons (default false): whether or not to set up the icons-preset.

• webfonts (default false): whether or not to set up the web-fonts-preset.

• typography (default false): whether or not to set up the typography-preset.

• scapel (default false): whether or not to install and set up the unocss-preset-scalpel.

• chroma (default false): whether or not to install and set up the unocss-preset-chroma.

• scrollbar (default false): whether or not to install and set up the unocss-preset-scrollbar.

🛠 Using unocss

After the adder runs,

• You can use unocss utility classes like bg-blue-700 in the markup (components, routes, app.html).

• You need to import unocss in your [page|component|__layout].svelte file import 'uno.css';