electron + typescript + tailwind + vite の環境構築

pnpm create @quick-start/electron electron-playground --template react-ts

cd react-ts
pnpm install

pnpm install -D tailwindcss @tailwindcss/vite

electron.vite.config.ts を以下のように修正

import { resolve } from "path";
import { defineConfig, externalizeDepsPlugin } from "electron-vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite"; // 追記

export default defineConfig({
  main: {
    plugins: [externalizeDepsPlugin()],
  },
  preload: {
    plugins: [externalizeDepsPlugin()],
  },
  renderer: {
    resolve: {
      alias: {
        "@renderer": resolve("src/renderer/src"),
      },
    },
    plugins: [react(), tailwindcss()], // 追記
  },
});

src/renderer/src/assets/base.css を以下のように修正

@import 'tailwindcss'; // 追記

... 省略 ...

メモ

以下のようなコマンドは古いので要らない

npx tailwindcss init -p