Kryp.Dev
HomeBlogs
ProfileKryp Arnold
09.05.2024
How to create an Electron app With React + TailwindCSS?This is a blog post about creating an Electron app with React & TailwindCSS in the most simple way.
Programming
TypeScript
React
TailwindCSS
Electron
Guide

Introduction

Hello, my friend. At the end of this article you can start building your Desktop App with Electron, React (Typescript + Webpack) and TailwindCSS.

  1. Open your terminal.
  2. Paste this command in your terminal to initialize the Electron project and install react.
npm init electron-app@latest my-electron-app -- --template=webpack-typescript && cd my-electron-app
npm install --save react react-dom
npm install --save-dev @types/react @types/react-dom
  1. Add this property in the tsconfig.json.
{
    ...,
    "compilerOptions": {
        ...,
        "jsx": "react-jsx",
        ...
    },
    ...
}
  1. Create client folder inside src folder.
  2. Delete src/index.css.
  3. Create these files inside src/client.

App.tsx

export default function App() {
    return(
        <div className="h-screen w-screen bg-zinc-800 grid place-items-center text-7xl text-zinc-300">
            Hello, World!
        </div>
    )
}

index.tsx

import { createRoot } from "react-dom/client";
import App from "./App";
import "./globals.css";
 
const root = createRoot(document.body);
 
root.render(<App />);

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;
  1. Go to src/renderer.ts, delete import './index.css' and add this line.
import "./client/index";
  1. Type these commands in your terminal.
npm install --save-dev tailwindcss postcss postcss-loader autoprefixer
npx tailwindcss init
  1. Go to tailwind.config.js and add "./src/**/*.{html,js,jsx,ts,tsx}" to content list.
  2. Create this file.

postcss.config.js

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    }
}
  1. Go to webpack.renderer.config.ts and add { loader: 'postcss-loader' } to the use property of the push method (line 8).
  2. Done, you can start building your app with Electron, React and TailwindCSS.