Electron Vite Quickstart

Here’s a quick start boilerplate for a project using Electron, Vite, React, and Tailwind CSS. This includes everything wired up so you can run a desktop app with a modern web UI instantly.

✅ Project Structure

my-electron-app/
├── main/                 # Electron main process code
│   └── index.ts
├── renderer/             # Frontend code (React + Tailwind + Vite)
│   ├── App.tsx
│   ├── main.tsx
│   └── index.html
├── package.json
├── vite.config.ts
└── tailwind.config.js

🛠️ 1. Initialize project

npm create vite@latest my-electron-app -- --template react-ts
cd my-electron-app
npm install

📦 2. Install dependencies

npm install electron electron-vite --save-dev
npm install tailwindcss postcss autoprefixer
npx tailwindcss init -p

🧠 3. Configure Tailwind (edit tailwind.config.js)

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./renderer/**/*.{js,ts,jsx,tsx,html}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

🧼 4. Add Tailwind to CSS (in renderer/style.css or create one)

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

And make sure it's imported in main.tsx:

import './style.css'

⚙️ 5. Create main/index.ts (Electron entry)

import { app, BrowserWindow } from 'electron'
import path from 'path'

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    },
  })

  win.loadURL('http://localhost:5173')
}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) createWindow()
})

📦 6. Create vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  root: 'renderer',
  build: {
    outDir: '../dist',
    emptyOutDir: true,
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './renderer'),
    },
  },
  server: {
    port: 5173,
  },
})

📜 7. Edit package.json Scripts

{
  "main": "main/index.ts",
  "scripts": {
    "dev": "concurrently \"vite\" \"npm:electron\"",
    "electron": "electron .",
    "build": "vite build"
  },
  "devDependencies": {
    "concurrently": "^8.2.0"
  }
}

Install concurrently:

npm install --save-dev concurrently

🚀 8. Run your app

npm run dev

This will:

• Start the Vite dev server (for React + Tailwind)
• Launch Electron pointing to http://localhost:5173