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(defaulttrue): whether or not to set up the attributify-preset.mini(defaultfalse): whether or not to set up the mini-preset.windi(defaultfalse): whether or not to set up the windi-preset.attributify(defaultfalse): whether or not to set up the attributify-preset.icons(defaultfalse): whether or not to set up the icons-preset.webfonts(defaultfalse): whether or not to set up the web-fonts-preset.typography(defaultfalse): whether or not to set up the typography-preset.scapel(defaultfalse): whether or not to install and set up the unocss-preset-scalpel.chroma(defaultfalse): whether or not to install and set up the unocss-preset-chroma.scrollbar(defaultfalse): 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-700in the markup (components, routes,app.html).You need to import unocss in your [page|component|__layout].svelte file
import 'uno.css';
