Devlog #2 — how to connect TailwindCSS to Electron Forge?

Hello everybody!

Today I want to talk about TailwindCSS and Electron Forge, and how to connect them.

TailwindCSS is a pretty strong library for building UI. Personally, I think it’s a perfect solution, because you don’t need to create separate CSS or SCSS files and write styles for every single element.

---

Installing Tailwind CSS in an Electron Forge project

First, we need to install our packages for TailwindCSS:

npm install tailwindcss @tailwindcss/postcss postcss

Then we create a file called "postcss.config.cjs", where we write this code:

module.exports = {
  plugins: {
    "@tailwindcss/postcss": {},
    autoprefixer: {},
  },
};

Also, don't forget about "tailwind.config.js":

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

Finally, we created a connection between TailwindCSS and Electron Forge! All that’s left is to import Tailwind CSS in index.css and make a wonderful design!

By the way, I'm going to make a little announcement. The next devlog will be about data exchange and signals between Electron and React. It's a very interesting and necessary topic.

Thanks to all for your attention! I hope you enjoyed reading my blog!

Have a good day!