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:
- The file must be named tailwind.config.js
- 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!