DEV Community
·
如何在electron-vite项目中添加ShadCN
💡
原文英文，约400词，阅读约需2分钟。
📝
内容提要
在electron-vite项目中添加shadcn组件的步骤包括：安装TailwindCSS v4，配置相关插件，初始化ShadCN，调整tsconfig文件以确保路径正确，最后运行命令完成设置。
🎯
关键要点
- 在electron-vite项目中添加shadcn组件的步骤包括：安装TailwindCSS v4。
- 运行命令npm install tailwindcss @tailwindcss/vite以安装TailwindCSS。
- 在electron.vite.config.ts文件中添加tailwindcss插件。
- 在/src/renderer/src/assets/main.css文件顶部添加@import 'tailwindcss';。
- 使用TailwindCSS类名验证安装是否成功。
- 在tsconfig.node.json文件中添加编译器选项以确保路径正确。
- 运行命令npx shadcn@latest init初始化ShadCN。
- 创建vite.config.ts文件并粘贴electron.vite.config.ts的内容。
- 在tsconfig.json中添加编译器选项。
- 将lib/utils.ts目录移动到src/renderer/src/lib/utils.ts。
- 再次运行npx shadcn@latest init以完成设置。
🏷️
标签
➡️
