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启动项目。
➡️
