macOSでElectronアプリ開発を始める【Electron + Vite + React + TypeScript + TailwindCSS】

環境構築

オレキラです。
macOSでElectron + Vite + React + TypeScript + Tailwind CSSの環境を構築する際に躓いた点があるので手順を書き置きます。

環境：macOS 26.2

プロジェクトの作成

ゼロから手動で設定ファイルを作成するのではなく、公式の足場構築ツール（Scaffolding tool）を使用します。ターミナルで以下のコマンドを実行してください。

npm create @quick-start/electron@latest my-electron-app

コマンドを実行すると質問が表示されるので、以下のように選択します：

• Select a framework
  -> react
• Add TypeScript
  -> Yes
• Add Electron updater plugin?
  -> No
• Enable Electron download mirror proxy?
  -> No

ディレクトリに移動してライブラリをインストール

作成が完了したら、ディレクトリに移動してライブラリをインストールし、開発サーバーを起動します。

cd my-electron-app
npm install
npm run dev

これだけで、Viteの超高速なホットリロード（HMR）が効いたElectron + React + TSアプリが立ち上がります。

ライブラリのインストールが失敗した場合

postinstall スクリプトの干渉を一時的に無効化して再インストールする

package.json の postinstall（electron-builder install-app-deps）が npm の依存関係解決ツリーを阻害している可能性があります。--ignore-scripts を使って純粋にパッケージだけを入れ直します。

# 1. 一度 electron モジュールだけを除去
npm uninstall electron

# 2. スクリプトを無視してインストール
npm install -D electron --ignore-scripts

# 3. 手動で electron のバイナリインストール処理を実行
node node_modules/electron/install.js

# 4. 起動テスト
npm run dev

Tailwind CSS v4 のインストール

Vite環境に最適化された Tailwind CSS v4 と、Vite用プラグインをインストールします。

npm install tailwindcss @tailwindcss/vite --save-dev

Vite の設定（Tailwindの有効化）

Electron内のレンダラープロセス（React側）のVite設定ファイル（src/renderer/vite.config.ts またはルートの vite.config.ts 内の renderer セクション）に、Tailwindプラグインを追加します。

// src/renderer/vite.config.ts (または electron.vite.config.ts)
import { defineConfig } from 'vite'
import react from '@vitejs/react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    react(),
    tailwindcss() // Tailwindプラグインを追加
  ]
})

CSSファイルのインポート

ReactのメインのCSSファイル（通常は src/renderer/src/assets/main.css や src/index.css）の最上部に、Tailwindのディレクティブを記述します。

@import "tailwindcss";

アプリケーションの起動

準備が完了しました。開発サーバーを起動してElectronアプリを立ち上げます。

npm run dev

💡 開発効率を上げるおすすめテンプレート

ゼロからの構築が面倒な場合、またはコンポーネントライブラリ（shadcn/uiなど）まで含めたモダンな構成をすぐに試したい場合は、以下の定評のあるオープンソースのボイラープレート（テンプレート）を活用するのもおすすめです。

• daltonmenezes/electron-app: React 19 + Tailwind v4 + TypeScript + shadcn/ui を網羅した最新鋭スターター。
• GeorgiMY/Vite-Electron-Template: IPC通信の型安全化やセキュリティ設定、shadcn/uiがあらかじめ統合された構成。 [1, 2]