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

Hello everybody!

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

TailwindCSS it's pretty strong library for make design. As for me, it's the perfect library, that's because you mustn't create a CSS or SCSS file where you need to write code style for each element.

---

Installation of TailwindCSS in Electron Forge's project

Well, firstly, we must 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! Left only import "@import "tailwindcss" 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 trade data 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!