electron-vite-tailwindcss-shadcn

一个基于 Electron + Vite + React + TypeScript 构建的现代桌面应用脚手架，集成了 TailwindCSS 和 Shadcn UI 组件库。

🚀 特性

• ⚡️ Electron - 跨平台桌面应用开发框架
• ⚡️ Vite - 极速的前端构建工具
• ⚛️ React 19 - 用于构建用户界面的 JavaScript 库
• 🔒 TypeScript - 带有类型安全的 JavaScript 超集
• 🎨 TailwindCSS 4 - 实用优先的 CSS 框架
• 🧩 Shadcn UI - 基于 Radix UI 的高质量组件集合
• 📦 electron-vite - 为 Electron 优化的 Vite 整合
• 🔧 Prettier & ESLint - 代码格式化和质量检查工具

📁 项目结构

/
├── build/                 # 构建资源和配置
├── resources/             # 应用资源文件
├── src/
│   ├── main/             # 主进程源代码
│   ├── preload/          # 预加载脚本
│   └── renderer/         # 渲染进程源代码（React 应用）
│       ├── src/
│       │   ├── assets/        # 静态资源文件
│       │   ├── components/    # React 组件
│       │   └── App.tsx        # 主应用组件
├── electron.vite.config.ts    # electron-vite 配置
├── package.json               # 项目依赖和脚本
└── tsconfig.json              # TypeScript 配置

🔧 开发环境设置

推荐的 IDE 配置

• VSCode + ESLint + Prettier

安装依赖

$ pnpm install

开发模式

$ pnpm dev

开发模式特性：

• 热更新
• 开发者工具 (F12 打开)
• 源码映射

构建应用

# Windows
$ pnpm build:win

# macOS
$ pnpm build:mac

# Linux
$ pnpm build:linux

🛠️ 自定义配置

TailwindCSS

TailwindCSS 4 使用全新的配置方式，不再需要tailwind.config.js文件。配置直接在CSS文件中通过@theme指令完成：

/* postcss.config.mjs */
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

/* 在CSS文件中 */
@import "tailwindcss";

@theme {
  /* 自定义颜色 */
  --color-primary: oklch(0.85 0.18 242);
  --color-secondary: oklch(0.92 0.14 158);
  
  /* 自定义字体 */
  --font-heading: "YourHeadingFont", sans-serif;
  
  /* 自定义断点 */
  --breakpoint-3xl: 1920px;
}

TailwindCSS 4将所有设计令牌自动转换为CSS变量，使您可以在运行时轻松访问它们：

/* 在自定义CSS中使用主题变量 */
.custom-element {
  color: var(--color-primary);
  font-family: var(--font-heading);
}

如果你需要定制主题的其他方面，如暗色模式、自定义工具类或变体等，还可以使用以下指令：

/* 定义暗色模式选择器 */
@variant dark (&:where(.dark, .dark *));

/* 添加自定义工具类 */
@utility animate-bounce-subtle {
  animation: bounce-subtle 1s infinite;
}

/* 添加自定义变体 */
@variant hocus (&:hover, &:focus);

Shadcn UI

项目已经预配置了 Shadcn UI。添加新组件只需运行：

# 添加组件
$ pnpm dlx shadcn@latest add button

components.json 配置

components.json 文件包含 Shadcn UI 的配置，默认配置如下：

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "postcss.config.mjs",
    "css": "src/renderer/src/assets/css/tailwind.css",
    "baseColor": "slate",
    "cssVariables": true
  },
  "aliases": {
    "components": "@renderer/components",
    "utils": "@renderer/lib/utils"
  }
}

可以根据需要修改以下配置：

• style：组件样式风格 (default, new-york)
• baseColor：基础颜色 (slate, gray, neutral, stone 等)
• cssVariables：是否使用 CSS 变量
• aliases：组件和工具库的导入别名

TypeScript 配置

为了确保 Shadcn UI 组件正常工作，确保 tsconfig.json 中包含以下路径映射：

{
  "compilerOptions": {
    "paths": {
      "@renderer/*": ["./src/renderer/src/*"]
    }
  }
}

这样可以确保使用 @renderer 别名时能正确解析路径。

Electron

主进程配置可以在 src/main 目录下修改，包括窗口设置、应用菜单、系统托盘等功能。

📡 IPC 通信

Electron 提供了 IPC（进程间通信）机制，允许主进程和渲染进程之间进行通信：

• 在渲染进程中使用 window.electron.ipcRenderer.send('channel', ...args) 发送消息
• 在主进程中使用 ipcMain.on('channel', handler) 监听消息

示例已在应用中实现，点击"Send IPC"按钮测试 IPC 通信。

📝 许可证

MIT