Skip to main content

Styling

Electron React Boilerplate supports CSS, SCSS, CSS and modules out of the box.

CSS​

To import css you can import it like a regular module:

import "./style.css";
// ...

Importing CSS​

Say you want to import css file from font-awesome module. Use following syntax:

@import "~font-awesome/css/font-awesome.css";

Note the tilde ~ placed before module name.

The import css from all your modules will be concatenated into a single css file that will be injected into the header at build time.

CSS Modules​

CSS modules allow you to scope styles. Files must be end with *.module.{css,sass,scss} if they are to be recognized as a css module. Here is an example:

import styles from "./Button.module.css";

const Button = () => <button className={styles.myButton} />;

Read more about css modules here:

SASS​

Importing SASS is identical except for the extension:

import styles from "./style.scss";
// ...

Tailwind Integration​

electron-react-boilerplate doesn't come with tailwind integration out of the box. There are two ways of configuring tailwind which depend whether you want to customize your tailwind config or not.

Without Custom Tailwind Config​

See this full working example of electron-react-boilerplate with tailwind for reference.

If you do not want to customize tailwind, you can simply run npm install tailwindcss and import it:

src/renderer/App.tsx
import "tailwindcss/tailwind.css";

Custom Tailwind Config​

If you do want to customize tailwind, install the necessary dependencies:

npm install --save-dev tailwindcss postcss postcss-loader autoprefixer
  1. Add the following snippet after the sass-loader entry in your webpack configs:
webpack.config.renderer.dev.ts
{
  // ...
  module: {
    rules: [
      {
        test: /\.s?css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
              sourceMap: true,
              importLoaders: 1,
            },
          },
          'sass-loader',
        ],
        include: /\.module\.s?(c|a)ss$/,
      },
      {
        test: /\.s?css$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
          {
            loader: 'postcss-loader',
            options: {
            postcssOptions: {
              plugins:
                [
                  require('tailwindcss'),
                  require('autoprefixer'),
                ]
              },
            },
          },
        ],
        exclude: /\.module\.s?(c|a)ss$/,
      },
      // ...
    ],
  }
}
webpack.config.renderer.prod.ts
{
  // ...
  module: {
    rules: [
      {
        test: /\.s?(a|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              modules: true,
              sourceMap: true,
              importLoaders: 1,
            },
          },
          'sass-loader',
        ],
        include: /\.module\.s?(c|a)ss$/,
      },
      {
        test: /\.s?(a|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader',
          {
            loader: 'postcss-loader',
            options: {
            postcssOptions: {
              plugins:
                [
                  require('tailwindcss'),
                  require('autoprefixer'),
                ]
              },
            },
          },
        ],
        exclude: /\.module\.s?(c|a)ss$/,
      },
      // ...
    ],
  }
}
  1. Create postcss.config.js in the .erb/configs folder with the following config:
.erb/configs/postcss.config.js
const tailwindcss = require("tailwindcss");
const autoprefixer = require("autoprefixer");

module.exports = {
  plugins: [tailwindcss, autoprefixer],
};
  1. Import it:
src/renderer/App.tsx
import "tailwindcss/tailwind.css";

Create a tailwind.config.js file in the root folder of your project with the following config:

tailwind.config.js
const colors = require('tailwindcss/colors');

module.exports = {
  content: ['./src/renderer/**/*.{js,jsx,ts,tsx,ejs}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        sky: colors.sky,
        cyan: colors.cyan,
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

Using SCSS​

Use following example project to learn how to migrate from CSS to SCSS

Further Readings

Images​

./src/img is the recommended folder for images.

Do not use resources folder. It is actually intended for build assets.

Example

Further Readings