[Notes] Exploring Vite

Vite is a build system for javascript application that leverages the fact that most modern browsers are up to date with the most recent ECMAscript specification.

Instead of bundling the JS into one giant blob, vite offloads those tasks to the browser by serving ESM. This is just for development though. For production build vite relies on rollup, a webpack like tool, to bundle the application.

Starting up with vite is super easy thanks to stackblitz. There is a pre-configured template for vite with vanilla-ts which will start a new project with preview. For local setup refer to: https://vitejs.dev/guide/ and https://tailwindcss.com/docs/guides/vite and follow the instructions

Install tailwind on stackblitz once the starter vite app is up.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

replace the content of styles.css with tailwind css directives.

@tailwind base;
@tailwind components;
@tailwind utilities;

make sure the tailwind.config.js has the required changes to pick up the files.

module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  ...
};

and then, add the tailwind css utility class to the only h1 element in the app.

<h1 class="text-emerald-500 text-center">Hello Vite with Tailwind CSS!</h1>

npm run dev

and done!

complete code here at stackblitz workspace