How to use Tailwind in Electron React boilerplate

Combining Tailwind with Electron js

Installing latest tailwind with electron-react-boilerplate is not straightforward forward and all the tutorials on google were outdated. I finally figured it out on my own. Hence decided to write this to help fellow developers

Installation

I will assume in this blog that you know what is tailwind and how it works. Once you have your electron-react-boilerplate ready. In the root of your project folder type this into your terminal

yarn add -D tailwindcss postcss-loader autoprefixer postcss 

Notice how all the installed libraries are devDependencies. This is how Tailwind works, generating required CSS at build time.

Setup Webpack

Open the file .erb/configs/webpack.config.renderer.dev.ts where we set up rules for generating the styles using the installed plugins and add these lines

add this line in module object under rules > use array

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

Similarly add 'postcss-loader' at the end of test: /\.s?css$/

Here’s how your file will look like after the above edits

webpack.config.renderer.dev.ts

module: {
    rules: [
      {
        test: /\.s?(c|a)ss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
              sourceMap: true,
              importLoaders: 1,
            },
          },
          'sass-loader',
	         {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: [require('tailwindcss'), require('autoprefixer')],
            },
          },
        ],
        include: /\.module\.s?(c|a)ss$/,
      },
      {
        test: /\.s?css$/,
        use: ['style-loader', 'css-loader', 'sass-loader', 'postcss-loader'],
        exclude: /\.module\.s?(c|a)ss$/,
      },
      // Fonts
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
      },
      // Images
      {
        test: /\.(png|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
      // SVG
      {
        test: /\.svg$/,
        use: [
          {
            loader: '@svgr/webpack',
            options: {
              prettier: false,
              svgo: false,
              svgoConfig: {
                plugins: [{ removeViewBox: false }],
              },
              titleProp: true,
              ref: true,
            },
          },
          'file-loader',
        ],
      },
    ],
  },

Post CSS configuration

In root of your project create postcss.config.js and paste the following code

const tailwindcss = require('tailwindcss');

module.exports = {
  plugins: [tailwindcss('./tailwind.config.js')],
};

Setup Tailwind Config ( very important )

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,jsx,tsx,ts}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

Adding tailwind directives

Add these 3 lines of code to your App.css and make sure it is being imported into App.tsx

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

Go to your App.tsx and write some tailwind classes and voila it should be working now. Don’t forget to restart your application