Check out this repo:
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
    // for more information about preprocessors
    preprocess: preprocess(),

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

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 -->
    import 'virtual:windi.css';

<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 -->
    import { onMount } from 'svelte';
    import 'virtual:windi.css'; 
    onMount(() => {
        // Note: Doesn't work right now
        // import('virtual:windi-devtools');

<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: [
        // 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


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!