Integrate Tailwind CSS in Electron

What is Tailwind CSS?

Tailwind CSS is a popular utility-first CSS framework that allows us to quickly build custom designs for our applications. Electron is a popular framework for building cross-platform desktop applications using web technologies.

Integrating Tailwind CSS in Electron can help us to create beautiful and responsive user interfaces for our Electron applications.

In this blog post, we will integrate Tailwind CSS using Electron React Boilerplate.

Electron React Boilerplate

It is a starter kit for building desktop applications in Electron and React. It provides a basic structure for the project, including pre-configured webpack and babel configurations, as well as a set of scripts for running, building, and testing the application.

Integrate Tailwind CSS in Electron

Let’s start.

Step 1:

The first step is to clone the Electron React Boilerplate. So, Let’s clone it into a custom folder. We can change my-app to anything we like and then run the following command:

  git clone https://github.com/electron-react-boilerplate/electron-react-boilerplate.git my-app
  cd my-app

  #Install dependencies
  npm install
  or
  yarn install

  #Run the app
  npm start
  or
  yarn start

The app will run with the default screen.

Step 2:

The second step is to install Tailwind CSS by running the following command:

  npm i --save-dev tailwindcss postcss-loader autoprefixer
  or
  yarn add -dev tailwindcss postcss-loader autoprefixer

Step 3:

Set up the Tailwind in webpack configuration.

Open the file .erb/configs/webpack.config.renderer.dev.ts where we set up rules for the styles with the installed plugins. Add the below rule -

  module: {
    rules: [
      {
        test: /\.css$/,
        include: [webpackPaths.srcRendererPath],
        use: ['style-loader', 'css-loader', 'postcss-loader'],
      }
    ]
  }

NOTE:

If there is any SassError as below, then remove the saas-loader rule.

 SassError: expected "{".
  ╷
2 │       import API from "!../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
  │                                                                                                  ^
  ╵
  src/renderer/App.css 2:98  root stylesheet

Step 4:

Create a Postcss config file in root named 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 5:

Create a Tailwind config file in root named tailwind.config.js and paste the following code:

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

Step 6:

Adding tailwind directives in the src/renderer/App.css file. Remove all the code and just add only these 3 lines.

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

Step 7:

Now we will test the tailwind. Go to the file src/renderer/App.tsx and write the below code inside the Hello().

Here we are giving tailwind classes for grey color background, center text, and white color text.

  <div>
    <h1 className="bg-gray-500 text-center text-white">
      Hi Tailwind has been integrated.
    </h1>
  </div>

Conclusion

Integrating Tailwind CSS in Electron can help us to create beautiful and responsive user interfaces for our Electron applications. By following the steps outlined in this blog post, we can easily set up Tailwind CSS in our Electron application and start using its classes to style our HTML elements.

Refer to this link to explore more about Tailwind CSS classes.