Setting up Tailwind 3 in Electron-React-Boilerplate (Jun 2022)

Intro

Electron-React-Boilerplate is one of the most popular starter repos for React development on desktop. It’s well-maintained, well-documented, and has a large community of supporters.

TailwindCSS is one of the fastest-growing CSS frameworks in the world. It has a higher learning curve than Bootstrap or Material but allows for much more flexibility. It’s been my CSS framework of choice for the last 2 years and I couldn’t imagine switching away.

Today we’re going to be walking through setting up Tailwind in a new Electron-React-Boilerplate project. Let’s get started!

Prerequisites

Before you begin, make sure you have a project initialized with Electron-React-Boilerplate already. If not, go to their Github and follow the setup instructions there.

Installing npm packages (< 30 seconds)

Use npm (or yarn/pnpm) to install the packages for setting upTailwindCSS:

npm i tailwindcss postcss-loader autoprefixer postcss --save-dev

Initialize Tailwind (< 30 seconds)

Create an empty file in the root directory called tailwind.config.js and make it look this:

module.exports = {
 content: ['./src/**/*.{tsx,ts}'],
 theme: {
 extend: {},
 },
 plugins: [],
};

Note: If you’re not using TypeScript, you should replace tsx, ts with jsx, js

Setting up PostCSS (1 min)

Next, create another empty file in the root directory called postcss.config.js and paste this:

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

Now we have to enable postcss-loader in our Webpack config. Go to .erb/configs/webpack.config.renderer.dev.ts and scroll down to the rules part of the config.

This is a key step: you’re gonna edit the 2nd object in the rules array. Once you’ve located it, add this to the use array:

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

When you’re finished, the entire rules array should look like this:

If you’re planning on taking your application to prod, make sure to repeat this process for .erb/configs/webpack.config.renderer.prod.ts as well.

Adding Tailwind to our root CSS file

Next, you want to locate your global CSS file. For new Electron-React-Boilerplate projects, this file is located at src/renderer/App.css .

Once you’ve found the CSS file, paste these rules at the top.

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

Try it out

In one of your components, try adding some Tailwind classes to see if it worked. For example:

<h1 className="text-xl font-medium text-red-800">electron-react-boilerplate</h1>

And that’s it! You officially set up Tailwind with Electron React Boilerplate.

Want more?

For more tutorials and silly adventures in AI, full stack, and design check out my Twitter

Thanks for reading!