DEV Community

Qichao
Qichao

Posted on • Edited on

Vite.js, Sevelte.js, and Windi CSS: The Perfect Combo for My Web Dev

#vite #svelte #windicss #webdev

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
Enter fullscreen mode Exit fullscreen mode

Get started

First, create new vite project using:

pnpm create vite
Enter fullscreen mode Exit fullscreen mode

Then choose svelte in the interactive CLI dialog.

Then:

cd projectFolder pnpm i pnpm i -D vite-plugin-windicss windicss
Enter fullscreen mode Exit fullscreen mode

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() ], }
Enter fullscreen mode Exit fullscreen mode

In main.js:

import 'virtual:windi.css'
Enter fullscreen mode Exit fullscreen mode

Done!

pnpm dev pnpm build
Enter fullscreen mode Exit fullscreen mode

Top comments (0)