DEV Community 👩‍💻👨‍💻

Cover image for SvelteKit ❤️ Windi CSS

Posted on • Updated on

SvelteKit ❤️ Windi CSS


  • @sveltejs/kit: "next" (1.0.0-next.115)
  • vite-plugin-windicss: "^1.0.0" (1.0.4)
  • @sveltejs/adapter-static: "next" (1.0.0-next.13)


  • store using localstorage for theme
  • dark mode correctly before everything get rendered
  • dark mode for Windi typography plugin


Sveltekit ❤️ Windi
Live Demo

Running the project

Clone this repo and cd to the directory, then run npm or yarn

pnpx degit dansvel/sveltekit-windicss myproject ## or npx
cd myproject
pnpm i ## or npm or yarn
pnpm run dev

## to generate static web
pnpm run build
Enter fullscreen mode Exit fullscreen mode

Go to Repo

Top comments (2)

srgeneroso profile image

Not sure if you know of (, he is also sharing some great work with SvelteKit, he made and example of a theme changer with nojs (, I'll try to mix both of your works as I'm in early stages (noobing) of creating a template for basic ecommerces with firebase.

opensas profile image

Hi, I followed your tutorial but I can't seem to override classes, they get applied in alphabetical order instead of in the order specified.

Please have a look at this stack overflow question for an example: and also in this gh issue:


🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.