Electron + Tailwind CSS Setup Guide

This guide helps you configure Tailwind CSS with Electron.js using PostCSS and live reloading.

🔧 Step 1: Project Structure

electron-project/
├── dist/
│   └── output.css            # Compiled Tailwind CSS
├── src/
│   ├── index.html            # Your HTML file
│   └── style/
│       └── style.css         # Tailwind source CSS
├── main.js                   # Electron entry point
├── tailwind.config.js        # Tailwind configuration
├── postcss.config.js         # PostCSS plugins
├── package.json              # Project metadata & scripts

📦 Step 2: Install Required Packages

Run the following command to install dependencies:

npm install electron tailwindcss postcss autoprefixer concurrently css-loader postcss-loader style-loader wait-on --save-dev

🎨 Step 3: Tailwind CSS Configuration

tailwind.config.js

module.exports = {
  content: [
    "./src/**/*.{html,js}",
    "./src/index.html"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

⚙️ Step 4: PostCSS Configuration

✅ Fix the typo in your config file. Use module.exports, not module.exportes.

postcss.config.js

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer')
  ]
};

🧵 Step 5: Create Style Entry File

src/style/style.css

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

🖥 Step 6: Electron Entry Point

main.js

const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
  });

  win.loadFile('src/index.html');
}

app.whenReady().then(createWindow);

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

🌐 Step 7: HTML Setup

src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Electron + Tailwind</title>
  <link href="../dist/output.css" rel="stylesheet">
</head>
<body class="flex items-center justify-center h-screen bg-gray-100">
  <h1 class="text-4xl font-bold text-blue-600">Hello Electron + Tailwind!</h1>
</body>
</html>

🧪 Step 8: Scripts for Development

package.json Scripts

"scripts": {
  "build:css": "tailwindcss -i ./src/style/style.css -o ./dist/output.css",
  "watch:css": "tailwindcss -i ./src/style/style.css -o ./dist/output.css --watch",
  "start": "electron .",
  "dev": "concurrently \"npm run watch:css\" \"electron .\""
}

🚀 How to Use

🔧 Build Once

npm run build:css
npm start

🧪 Start Dev Mode with Live Tailwind Watch

npm run dev

This will:

Watch Tailwind CSS changes
Start the Electron app
Automatically recompile output.css on file save

✅ Final Notes

⚠ The tailwindcss version is important, so always use the LTS one.
You must import the output.css into your HTML.
Make sure dist/output.css is in the correct relative path from index.html.
Use wait-on for more advanced coordination if needed (like waiting for server start).