update docs for SvelteKit

[opensas]

According to the docs:

add svelte-windicss-preprocess config to svelte.config.js

+ import { windi } from "svelte-windicss-preprocess";
  /** @type {import('@sveltejs/kit').Config} */
  const config = {
+   preprocess: [
+     windi({})
+   ],
    kit: {
      // hydrate the <div id="svelte"> element in src/app.html
      target: '#svelte'
    }
  };

export default config;

but the default sveltekit now comes like this:

import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://github.com/sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: preprocess(),

    kit: {
        // hydrate the <div id="svelte"> element in src/app.html
        target: '#svelte'
    }
};

export default config;

Several tutorials on the web tells that we should use vite-plugin-windicss like this:

https://www.liip.ch/en/blog/sveltekit-and-tailwind-windi-css

and

https://dev.to/dansvel/sveltekit-windi-2g50

npm i -D vite-plugin-windicss

// svelte.config.js
import preprocess from 'svelte-preprocess';
import WindiCSS from 'vite-plugin-windicss/dist/index.mjs'

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://github.com/sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: preprocess(),

    kit: {
        // hydrate the <div id="svelte"> element in src/app.html
        target: '#svelte',
        vite: {
            plugins: [
                WindiCSS(),
            ]
        }       
    },  
};

export default config;

[hannoeru]

/ping @alexanderniebuhr

[alexanderniebuhr]

quick comment 👎 Will update with more details once at my pc

[alexanderniebuhr]

Ok, there are two ways using windi with svelte / sveltekit. In our docs, the installation guide "svelte", uses our preprocessor, while the "vite" one has a section for using our vite-plugin. We need to keep documentation for both, since we will have both options in the future.

Can make sure to cross-link both and see if they need an update for both. Otherwise, I do not see any action needed.