Why
Vite is fast.
Svelte is elegant.
Windi CSS is easier to install than Tailwind on Vite-Svelte.
And you should read this before you choose: https://github.com/windicss/windicss/discussions/176
Preparation
I strongly recommend pnpm as it is much faster and saves spaces on disks. If you haven't installed it, run:
npm i -g pnpm
Get started
First, create new vite
project using:
pnpm create vite
Then choose svelte
in the interactive CLI dialog.
Then:
cd projectFolder
pnpm i
pnpm i -D vite-plugin-windicss windicss
Then in vite.config.js
:
import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import WindiCSS from 'vite-plugin-windicss'
// https://vitejs.dev/config/
export default {
plugins: [
WindiCSS(),
svelte()
],
}
In main.js
:
import 'virtual:windi.css'
Done!
pnpm dev
pnpm build
Top comments (0)