chkilel/vite-wind-boilerplate

Windi CSS boilerplate with vitejs speed

ViteWind boilerplate

Live Demo

Features

• ⚡️ Vite 2, pnpm - born with fastness
• 🎨 Windi CSS - next generation utility-first CSS framework
• 😃 Use icons from https://css.gg/app
• ☁️ Deploy on Netlify, zero-config

Pre-packed

UI Frameworks

• Windi CSS (On-demand TailwindCSS) - lighter and faster, with a bunch of additional features!
  • Windi CSS Typography
  • Windi CSS Forms
  • Windi CSS Icons

Icons

• Windi CSS Icons - use icons from icon sets 🔍 Icônes

Try it now!

Clone to local

git clone https://github.com/chkilel/vite-wind-boilerplate.git
cd vite-wind-boilerplate
pnpm i # If you don't have pnpm installed, run: npm install -g pnpm

Usage

Multi-Page App

Suppose you have the following source code structure:

├── package.json
├── vite.config.js
├── index.html
├── second.html
├── third.html
├── ...
└── nested
    ├── fourth.html
    └── ...

During dev, simply navigate or link to /nested/ - it works as expected, just like for a normal static file server.

During build, all you need to do is to specify multiple .html files as entry points:

// vite.config.js
const { resolve } = require('path')
const { defineConfig } = require('vite')

module.exports = defineConfig({
  build: {
    rollupOptions: {
      input: {
        index: resolve(__dirname ,'index.html'),
        second: resolve(__dirname, 'second.html'),
        third: resolve(__dirname, 'third.html'),
        fourth: resolve(__dirname, 'nested/fourth.html')
      }
    }
  }
})

__dirname will be the folder of your vite.config.js file when resolving the input paths.

Development

Just run and visit http://localhost:3636

pnpm dev

Build

To build the App, run

pnpm build

And you will see the generated file in dist that ready to be served.

Deploy on Netlify

Go to Netlify and select your repo, OK along the way, and your App will be live in a minute.