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以完成设置。
❓
延伸问答
如何在electron-vite项目中安装TailwindCSS？
运行命令npm install tailwindcss @tailwindcss/vite来安装TailwindCSS。
在electron-vite项目中如何配置tailwindcss插件？
在electron.vite.config.ts文件中添加tailwindcss插件。
如何验证TailwindCSS是否成功安装？
在项目中使用一个TailwindCSS类名来验证安装是否成功。
如何初始化ShadCN？
运行命令npx shadcn@latest init来初始化ShadCN。
在tsconfig.node.json中需要添加哪些编译器选项？
需要添加composite、types、baseUrl和paths等编译器选项。
如何处理ShadCN初始化时的错误？
创建vite.config.ts文件并粘贴electron.vite.config.ts的内容，然后再次运行npx shadcn@latest init。
🏷️
标签
➡️
