Kryp 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.
- Open your terminal.
- Paste this command in your terminal to initialize the Electron project and install react.
- Add this property in the
tsconfig.json
.
- Create
client
folder inside src
folder.
- Delete
src/index.css
.
- Create these files inside
src/client
.
App.tsx
index.tsx
globals.css
- Go to
src/renderer.ts
, delete import './index.css'
and add this line.
- Type these commands in your terminal.
- Go to
tailwind.config.js
and add "./src/**/*.{html,js,jsx,ts,tsx}"
to content
list.
- Create this file.
postcss.config.js
- Go to
webpack.renderer.config.ts
and add { loader: 'postcss-loader' }
to the use property of the push method (line 8).
- Done, you can start building your app with Electron, React and TailwindCSS.