Electron React Tailwind

taniyow
1

Electron with React and TailwindCSS Starter using Webpack

Download

electron-react-tailwind

A simple boilerplate for creating desktop applications using Electron, React and Tailwind CSS.
npm install to install all the dependencies.
npm start to start the development server.

To start a project similar to this boilerplate...

npm init electron-app@latest my-electron-app -- --template=webpack
npm install --save-dev @babel/preset-react babel-loader @babel/core

Add the following to the webpack.rules.js file:

{
  test: /\.jsx$/,
  use: {
 loader: "babel-loader",
 options: {
   exclude: /node_modules/,
   presets: ["@babel/preset-react"],
 },
  },
},

npm install --save react react-dom
Create index.jsx and App.jsx file in the src folder and add the following code: ```jsx // Inside index.jsx import * as React from "react"; import { createRoot } from "react-dom/client"; import App from "./App.jsx"; import "./index.css";

const root = createRoot(document.body); root.render();

```jsx
// Inside App.jsx
import React from "react";

export default function App() {
  return (
    <div className="min-h-screen max-h-full bg-zinc-950">
      <div className="font-bold text-white">App</div>
    </div>
  );
}

Replace import './index.css'; with import './index.jsx'; in the renderer.js file.
To display or undisplay the DevTools, uncomment or comment the following code in the main.js file:
```
// Open the DevTools.
mainWindow.webContents.openDevTools();
```
For the built-in menu, set the following code in the main.js file:
```
autoHideMenuBar: true, // hides the menu bar
```
npm install --save-dev tailwindcss postcss postcss-loader autoprefixer
npx tailwindcss init
Add the following to the tailwind.config.js file:
```
content: ["./src/**/*.{html,js,jsx}"],
```

Add the postcss-loader in webpack.renderer.config.js:

{
  loader: "postcss-loader",
  options: {
postcssOptions: {
  plugins: [require("tailwindcss"), require("autoprefixer")],
},
  },
},

Add the following to webpack.rules.js

const path = require("path");
// ...other code
{
  test: /\.css$/,
  include: [path.resolve(__dirname, "app/src")],
  use: ["style-loader", "css-loader", "postcss-loader"],
},

Replace the index.css with the Tailwind CSS code:

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

Import index.css in the index.jsx file:
Run npm start to start the development server.

Top categories