Electron-React-Boilerplate & TailwindCSS

Introduction

Electron allows you to build cross-platform desktop apps with web technologies. If you’ve used Electron before, you’ve probably come across Electron-React-Boilerplate (ERB). ERB provides by far the best starting template for Electron with React.

It also comes bundled with:

• Redux
• React Router
• Webpack
• Typescript
• React Hot Loader (Hot Module Replacement)

You may also have heard of Tailwind CSS, a low-level CSS framework that provides utility classes to aid styling. I found it slightly difficult to add Tailwind to my ERB project as the pre-existent configuration files can be quite overwhelming. I found nothing of great use online to help with my specific situation. I managed to finally get it working, so I thought I’d document it.

Adding Tailwind to ERB

Step 1 : Installing tailwind, postcss-loader & autoprefixer

The tailwindcss, postcss-loader and autoprefixer packages are required to get Tailwind working.

ERB suggests the usage of yarn, so install them with:

yarn add tailwindcss postcss-loader autoprefixer -D

However, NPM should also work if you’d prefer:

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

Step 2 : Create postcss config

Create a file in the root directory called ‘postcss.config.js’ and paste the following code:

/* eslint global-require: off, import/no-extraneous-dependencies: off */

module.exports = {
  plugins: [require('tailwindcss'), require('autoprefixer')]
};

Step 3 : Create tailwind config

Create a file in the root directory called ‘tailwind.config.js’ and paste the following code:

module.exports = {
  theme: {},
  variants: {},
  plugins: []
};

Step 4 : Updating webpack dev renderer config

Open ‘configs/webpack.config.renderer.dev.babel.js’.

Add this to the first rule in the module section:

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

It should look like this:

...
module: {
    rules: [
      {
        test: /\.global\.css$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: [require('tailwindcss'), require('autoprefixer')]
            }
          }
        ]
      },
      {
        test: /^((?!\.global).)*\.css$/,
        use: [
          {
            loader: 'style-loader'
          },
...

A full version of this file can be found here. (This was the configuration part that I struggled with).

Step 5 : @Tailwind Directive & Tailwind Styles

Add this to the top of your app.global.css file:

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

This adds the base, components and utilities styles.

Step 6 : Check the Tailwind Styles Work

Add this div element to your one of your React components:

<div className="bg-gray-500 p-5 text-center">Tailwind</div>

• bg-gray-500 adds a dark-ish grey background.
• p-5 adds padding on all sides.
• text-center centres the ‘Tailwind’ text in the div element

Run ‘yarn dev’ to start the development server. You should see the styles applied like so:

(Your background may not be dark grey like mine is but you should still see the styles applied). If the background colour that we applied with ‘bg-grey-500’ conflicts with your background colour, change this class to ‘bg-white’ or ‘bg-black’.

Bringing it all Together

Following the steps above should hopefully get Tailwind CSS working in your ERB project. In case it doesn’t, or in case some parts were confusing (like step 4 was for me), some GitHub gists are attached below:

package.json:

Example package.json with installed packages needed for ERB & Tailwind

postcss.config.js:

Example postcss.config.js needed for ERB & Tailwind

tailwind.config.js:

Example tailwind.config.js needed for ERB & Tailwind

webpack.config.renderer.dev.babel.js:

Example webpack.config.renderer.dev.babel.js needed for ERB & Tailwind

app.global.css:

Example CSS file with added directives needed for ERB & Tailwind

React Component:

Example React component and usage of Tailwind classes

Please Note : The bulk of the code discussed and shown in this article is not of my own creation, but of the creators of electron-react-boilerplate.

I hope this article has helped! Thanks for reading!