Setting Up Electron (Electron Forge) with React, Typescript, and Tailwind CSS in 2025: A Comprehensive Tutorial

Electron is a framework for creating desktop applications with JavaScript, HTML, and CSS, compatible with multiple operating systems. Combining Electron with the popular React library and the utility-first Tailwind CSS framework empowers developers to build feature-rich, visually appealing desktop applications with efficiency and ease.

Setting up Electron with React, Typescript, and Tailwind CSS can be challenging. From my own experience, before writing this tutorial, I searched online and found several guides, but most were either overly complex, outdated, or lacked clear and conclusive instructions.

In this tutorial, we will guide you through the process of building a simple desktop application using Electron and React, leveraging Electron Forge. Once the initial setup is complete, we’ll integrate Tailwind CSS and PostCSS to enhance the styling and design of your application

What is Electron Forge

Electron Forge is an all-in-one tool for packaging and distributing Electron applications.

Electron Forge is a batteries-included toolkit for building and publishing Electron apps. Get your Electron app started the right way with first-class support for JavaScript bundling and an extensible module ecosystem.

Prerequisites

Ensure you have the following software installed on your system:

• Node.js and npm (Node Package Manager): Download and install Node.js from the official website.

Step 1: Creating an Electron application with Electron Forge

This setup will include Electron, Webpack, and TypeScript.

1. Open your terminal or command prompt.
2. Run the following command to create an Electron application using Electron Forge with the Webpack Typescript template:

npx create-electron-app@latest my-app --template=webpack-typescript

This command initializes a new Electron project named my-app with Webpack as the build system.

3. Once the setup is complete, navigate to your project directory:

cd my-app

4. To verify that everything is set up correctly, run:

npm start

Step 2: Installing React

1. Edit the newly created tsconfig.json to add the key-value entry "jsx": "react-jsx" to the "compilerOptions" section.

{
  "compilerOptions": {
    "target": "ES6",
    "allowJs": true,
    "module": "commonjs",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "noImplicitAny": true,
    "sourceMap": true,
    "baseUrl": ".",
    "outDir": "dist",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "jsx": "react-jsx", // add this to enable jsx
    "paths": {
      "*": ["node_modules/*"]
    }
  },
  "include": ["src/**/*"]
}

2. Add the React dependencies

Use the following commands to install the required React libraries and their TypeScript definitions:

npm install --save react react-dom
npm install --save-dev @types/react @types/react-dom

3. Create a src/app.tsx File Create a new file named src/app.tsx and add the following code

import { createRoot } from 'react-dom/client';

const root = createRoot(document.body);
root.render(<h2>Hello from React!</h2>);

This code initializes React and renders a simple heading to the page.

4. Import the App File in **src/renderer.ts** Open the src/renderer.ts file and add the following import statement at the end of the file

// Add this to the end of the existing file
import './app';

5. Run npm start

Step 3: Installing Tailwind CSS

Installing Tailwind CSS as a PostCSS plugin is the most seamless way to integrate it with build tools like webpack.

1. Open your terminal or command prompt.
2. Install tailwindcss and its peer dependencies via npm, and create your tailwind.config.js file.

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

3. Add Tailwind to your PostCSS configuration: Create a file named postcss.config.js in the root directory of your project and add the following configuration:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

4. Configure your template paths:

Update your tailwind.config.js file to include the paths to all your template files and their extensions (e.g., .ts, .jsx, .tsx)

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

j

5. Add the Tailwind directives to your CSS

In the src/index.css file, include the Tailwind CSS directives to load its base, components, and utilities styles

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

6. Modify the webpack.renderer.config.ts file to include postcss-loader for processing Tailwind CSS.

import type { Configuration } from 'webpack';

import { rules } from './webpack.rules';
import { plugins } from './webpack.plugins';

rules.push({
  test: /\.css$/,
  use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'postcss-loader' }], // postcss-loader is used to process the CSS with Tailwind
});

export const rendererConfig: Configuration = {
  module: {
    rules,
  },
  plugins,
  resolve: {
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.css'],
  },
};

7. Update src/app.tsx to Change Text Color to Red

Modify the src/app.tsx file to change the text color to red:

Save the file and refresh your application to see the text in red.

Note: If changes are not reflecting stop and build the application again.

Conclusion

This tutorial covered the basics, providing a solid foundation. However, there’s much more to Electron, Electron Forge, React, and Typescript to build sophisticated desktop applications. Be sure to explore the official documentation to discover more.