モチベーション
- Viteを使うとElectronでのデスクトップアプリ開発は捗る（という噂を聞いた）
- ビルドがめちゃくちゃ軽いので、動作確認が楽
- Electronは環境構築が面倒なのでなるべく楽したい
- TailwindCSSも一緒に使いたい
前提
- Nodejs導入済み
- 今回はnvmでv22.14.0を利用
Electron環境構築
- 日本語情報だと@quick-start/electron@latestとかも出てくるが、これはサードパーティー製
- 基本的に公式へ従っておくが吉なので、以下の手順で実施
npm create vite@latest my-electron-vite-project
# インストールは以下の順で選択
# Select: Others
# Select: Electron (create-electron-vite)
# Select: React
cd my-electron-vite-project
npm install
Electronの動作確認
npm run dev
(Option) TailwindCSSインストール
- 最新バージョンはv4
- ネットにはv3の構築方法が蔓延っているので、公式に従ってインストール
npm install tailwindcss @tailwindcss/vite
- 以下のように各ファイルを編集する
vite.config.ts
import { defineConfig } from 'vite'
import path from 'node:path'
import electron from 'vite-plugin-electron/simple'
import react from '@vitejs/plugin-react'
[+] import tailwindcss from '@tailwindcss/vite'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
[+] tailwindcss(),
react(),
electron({
main: {
// Shortcut of `build.lib.entry`.
entry: 'electron/main.ts',
},
(以下省略)
- どちらにしろデフォルトのcssは一度すべて削除すると思うので、追記・新規作成どちらでもよい
index.css
[+] @import "tailwindcss";
- Reactflowなど他コンポーネントでTailwindCSSを使う場合、important記述が必要になることがある
- ネットにはv3の記述が蔓延っているが、v4では設定方法が根本的に異なる
- v4のimportant記述は以下の通り
index.css
[+] @import 'tailwindcss' important;