DEV Community

Cover image for 🚀 Electron Desktop Apps with Next.js & Tailwind CSS v4: The Missing "No-Bloat" Boilerplate
Sudhanshu Ambastha
Sudhanshu Ambastha

Posted on

🚀 Electron Desktop Apps with Next.js & Tailwind CSS v4: The Missing "No-Bloat" Boilerplate

#nextjs #electron #tailwindcss #javascript

Hey everyone! 👋

I've been working with Nextron (Next.js + Electron) lately, and I noticed a frustrating gap. Most templates out there are either:

  1. TypeScript-only (heavy and sometimes unnecessary for quick tools).
  2. Outdated (still using Tailwind v3 or old PostCSS configs).
  3. Incomplete (requiring manual "plumbing" to get JS and Tailwind working together).

I found that the official saltyshiomix/nextron examples were either TS-focused or lacked a pre-configured Tailwind v4 setup. So, I took the base JS skeleton and manually integrated the new Tailwind CSS v4 engine.

Introducing: nextron-js-tw4-boilerplate 🛠️✨

🔥 Why This Template?

I manually configured this to be "plug-and-play" so you can skip the setup headache:

  • Tailwind CSS v4 Engine: Pre-installed with the high-performance @tailwindcss/postcss bridge.
  • Pure JavaScript: Zero TypeScript bloat. Ideal for rapid prototyping.
  • Next.js 14 (Pages Router): Chosen for its rock-solid stability in the Electron renderer process.
  • Fixed Production Assets: I pre-configured unoptimized: true in renderer/next.config.js so your images and assets don't break when you build your .exe or .dmg. 📦✅

🛠️ How to Use It

You can start your new project in two ways:

  • 1️⃣ The "One-Click" Way (Recommended)

Go to the GitHub Repo and click the green "Use this template" button. This creates a fresh repo under your account immediately! 🖱️🔥

  • 2️⃣ The CLI Way 
# Clone the repo
git clone https://github.com/Sudhanshu-Ambastha/nextron-js-tw4-boilerplate.git

# Enter the directory
cd nextron-js-tw4-boilerplate/template

# Install & Run
npm install
npm run dev
Enter fullscreen mode Exit fullscreen mode

🧠 Technical Highlights

Since Nextron has a unique directory structure, I’ve handled a few critical configurations for you:

  • Scanning via @source: In renderer/styles/global.css, I added the @source directive so Tailwind v4 correctly scans your JSX files inside the renderer folder.
  • PostCSS Bridge: Fully configured postcss.config.js to ensure the v4 engine talks to the Next.js build pipeline correctly.

📝 Open Source

This is released under the MIT License. I’m a big fan of the Electron community and wanted to provide a modern, JS-first alternative that works out of the box.

GitHub Repository: Sudhanshu-Ambastha/nextron-js-tw4-boilerplate

What are you building with Electron? Let me know in the comments if you run into any issues or have suggestions! 👇

Top comments (0)