DEV Community
·
在React Vite项目中使用Tailwind CSS 4设置Shadcn Canary（仅限JavaScript）
💡
原文英文，约300词，阅读约需1分钟。
📝
内容提要
使用Vite创建React项目，安装Tailwind CSS并配置Shadcn Canary。步骤包括创建项目、安装依赖、配置vite.config.json和jsconfig.json，最后在App.jsx中使用Button组件，运行npm run dev启动项目。
🎯
关键要点
- 使用Vite创建React项目，命令为npm create vite@latest。
- 选择React和JavaScript作为选项。
- 安装Tailwind CSS，命令为npm install tailwindcss @tailwindcss/vite。
- 在vite.config.json中添加tailwind插件、resolve和path配置。
- 在src/index.css顶部导入Tailwind CSS。
- 在根目录创建jsconfig.json文件，配置compilerOptions。
- 运行npm add -D @types/node安装Node类型定义。
- 安装Shadcn Canary，命令为npx shadcn@canary init。
- 选择“zinc”主题，并确认使用CSS变量。
- 安装组件时使用“use --force”选项。
- 在src/App.jsx中导入Button组件并使用。
- 运行npm run dev启动项目。
❓
延伸问答
如何使用Vite创建React项目？
使用命令npm create vite@latest创建React项目，并选择React和JavaScript作为选项。
如何在Vite项目中安装Tailwind CSS？
使用命令npm install tailwindcss @tailwindcss/vite安装Tailwind CSS。
如何配置vite.config.json以使用Tailwind CSS？
在vite.config.json中添加tailwind插件、resolve和path配置。
如何在项目中使用Shadcn Canary？
使用命令npx shadcn@canary init安装Shadcn Canary，并选择主题和CSS变量选项。
如何在App.jsx中使用Button组件？
在src/App.jsx中导入Button组件并使用，示例代码为<Button variant="default">Button</Button>。
如何启动Vite项目？
运行命令npm run dev启动Vite项目。
➡️
