DEV Community
·
在Vite + React 19中使用Tailwind CSS v3设置ShadCN UI：像专业人士一样修复导入错误！
💡
原文英文，约200词，阅读约需1分钟。
📝
内容提要
本教程介绍如何在Vite + React 19项目中设置ShadCN UI，使用Tailwind CSS v3，包括安装ShadCN UI、配置tsconfig.app.json、修复导入错误、添加按钮组件及其自定义样式，以及解决TypeScript错误。
🎯
关键要点
- 本教程介绍如何在Vite + React 19项目中设置ShadCN UI，使用Tailwind CSS v3。
- 学习如何安装ShadCN UI，配置tsconfig.app.json以解决路径冲突。
- 修复导入错误，使用遗留的对等依赖。
- 添加按钮组件，并使用破坏性变体进行自定义。
- 提供解决TypeScript错误的快速修复方案。
- 涵盖的主题包括安装ShadCN UI和修复npm依赖问题，添加组件（按钮、导航栏）与Tailwind CSS，解决TypeScript错误和在vite.config.ts中配置别名，应用自定义样式和主题变体。
❓
延伸问答
如何在Vite + React 19项目中安装ShadCN UI？
可以通过npm或yarn安装ShadCN UI，具体命令在教程中有说明。
如何解决tsconfig.app.json中的路径冲突？
需要在tsconfig.app.json中配置相应的路径别名，以解决路径冲突问题。
如何修复导入错误？
可以使用遗留的对等依赖来修复导入错误，具体方法在教程中有详细说明。
如何添加自定义按钮组件？
可以通过创建按钮组件并使用破坏性变体进行自定义来添加按钮组件。
如何解决TypeScript错误？
教程中提供了快速修复TypeScript错误的方法，可以参考相关部分。
在vite.config.ts中如何配置别名？
需要在vite.config.ts文件中添加相应的别名配置，以便正确解析模块路径。
➡️
