TL;DR

Check out this repo: github.com/munxar/sveltekit-tailwind
thanks and goodbye :-)

Setup SvelteKit

mkdir myproject
cd myproject
npm init svelte@next

Note: I choose TypeScript and only CSS when asked by the wizard, but you can choose whatever you like.

Install Windi CSS

Because SvelteKit now uses Vite 2 as a preprocessor in development mode, we use vite-plugin-windicss.

npm i -D vite-plugin-windicss

Now I import the plugin int the svelte.config.cjs file:

// 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;

Very basic stuff, import the plugin and add it to the vite plugins section.

Enable Windi CSS

Open the src/routes/__layout.svelte file and add this import:

<!-- src/routes/__layout.svelte -->
<script>
    import 'virtual:windi.css';
</script>

<slot />

Enable Developer Tools integration (optional)

Note: This broke in the new SvelteKit version, so don't use it right now.

Sometimes I like to tinker in the developer tools of the browser while prototyping. This can be done with this optional import.

<!-- src/routes/__layout.svelte -->
<script>
    import { onMount } from 'svelte';
    import 'virtual:windi.css'; 
    onMount(() => {
        // Note: Doesn't work right now
        // import('virtual:windi-devtools');
    });
</script>

<slot />

By putting the import('virtual:windi-devtools') into the onMount callback, we delay the loading when the client is running in a real browser environment and not while server-side rendering.

Add Tailwind Plugins / Config

I need to add some settings, so I use my plain old tailwind config file. There are two important details:

  1. The file must be named tailwind.config.js
  2. If you need plugins, import them from windicss/plugin
    Here is my example config:
// tailwind.config.js

module.exports = {
    dark: 'class',
    plugins: [
        require('windicss/plugin/forms'),
        require('windicss/plugin/aspect-ratio'),
        require('windicss/plugin/line-clamp'),
        require('windicss/plugin/filters'),
        require('windicss/plugin/scroll-snap'),     
        // add more as you like
    ],
}

Done. Really? Yes!
We have all set up to use what Tailwind offers and much more. Check out the Windi CSS documentation for the amazing details.
I use VS Code as an editor and love the Windi CSS plugin, check it out: WindiCSS IntelliSense

Recap

This is everything I had to do. Imho Windi CSS has some very nice advantages over plain Tailwindcss (even the @tailwindcss/jit).
If you have some questions or inputs drop a comment.
Build some amazing web applications!