Tailwindcss + React + Typescript in an Electron app

I've chosen Electron for building DevBunny, a desktop app that provides convenient offline tools for developers. It was the obvious choice since I am a frontend engineer and Electron allows me to use technologies I already know. I like React, Typescript and Tailwindcss so I went about setting these up in my app.

Electron Forge has provided a template for creating an electron project with webpack and typescript:

yarn create electron-app my-new-app --template=typescript-webpack

This will setup your project to use Typescript and all the goodies that come with webpack such as autorefresh on save. Next let's add React to our project:

yarn add react react-dom
yarn add --dev @types/react @types/react-dom

Edit your project's tsconfig.json and add the line "jsx": "react" under compilerOptions. This tells the compiler to emit .js files with JSX changed to the equivalent React.createElement calls.

Next up let's add Tailwindcss to our project:

yarn add -D tailwindcss postcss autoprefixer postcss-loader
npx tailwindcss init

Add a postcss.config.js file to the root of your project with the following contents:

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

Update the content section of your project's tailwind.config.js to be ["./src/**/*.{html,js,ts,tsx}"]. This will tell Tailwind which file types to process. Now it should look close to:

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

Next we need to import tailwindcss into the project's CSS file. Go to your index.css and replace the contents with:

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

Next up configure webpack to run the postcss loader which processes tailwindcss as we had configured earlier. Update your project's webpack.renderer.config.js to add postcss-loader in the rules:

rules.push({
  test: /\.css$/,
  use: [
    ...
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [require("tailwindcss"), require("autoprefixer")],
        },
      },
    },
  ],
});

At this point, we are ready to write some React code.

Create folder components under src folder and add a file App.tsx within the components folder with the following contents:

import React from "react";

const App = () => {
  return (
    <div className="md:container mx-auto flex items-center justify-center h-screen bg-gray-200">
      <p className=" text-indigo-400 text-2xl">React + Tailwind + Typescript + Electron = ❤</p>
    </div>
  );
};

export default App;

Here we define a App functional component. Note the tailwind styles in the classNames.

Add a index.tsx file undersrc folder with the following contents:

import * as React from "react";
import * as ReactDOM from "react-dom";

import App from "./components/App";

function render() {
  ReactDOM.render(<App />, document.getElementById("app"));
}

render();

Here we import react and react-dom and render our App component on an element with id of app. Open src/index.html and replace the content under body with:

<div id="app"></div>

This is the element where our App will be mounted by react-dom.

Go to your terminal in the project root and run yarn start. If everything goes well you should see a window like this:

Screenshot 2022-01-21 at 19.04.07.png

I'll be documenting the development of DevBunny here and what I learn. In case you are interested kindly follow me.

Happy coding!

Learn & Build

Learn & Build

Tailwindcss + React + Typescript in an Electron app