使用 Vite + React 19 集成 Tailwind CSS 与 shadcn/ui 组件库完整指南

🌟 前言

随着 React 19 的发布，开发者对高效开发工具链的需求日益增加。本文将手把手教你如何通过 Vite 快速搭建 React 19 项目，并整合 Tailwind CSS 与 shadcn/ui 组件库，最后配置路径别名优化开发体验。

一、创建 React 19 项目

使用 pnpm 快速初始化项目：

pnpm create vite --template=react-ts

按提示输入项目名称后进入项目目录。

二、集成 Tailwind CSS

1️⃣ 安装依赖

npm install tailwindcss @tailwindcss/vite

2️⃣ 配置 Vite 插件

修改 vite.config.ts：

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [tailwindcss()],
})

3️⃣ 引入 Tailwind

修改 index.css， 顶部添加：

@import "tailwindcss";

4️⃣ 启动项目

npm run dev

三、配置路径别名

1️⃣ 修改 TypeScript 配置

tsconfig.json：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

tsconfig.app.json：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

2️⃣ 安装类型声明

pnpm add -D @types/node

3️⃣ 配置 Vite 别名解析

更新 vite.config.ts：

import path from "path"
import { defineConfig } from "vite"

export default defineConfig({
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

四、集成 shadcn/ui 组件库

1️⃣ 初始化配置

pnpm dlx shadcn@canary init

根据提示选择：

• 使用 Tailwind CSS
• 配置组件目录
• 启用 dark mode

2️⃣ 添加示例组件

pnpm dlx shadcn@canary add sidebar-08

五、项目结构预览

my-project/
├── src/
│   ├── components/  # shadcn 组件
│   ├── App.tsx
│   └── style.css
├── vite.config.ts
├── tailwind.config.js
└── tsconfig.json

💡 常见问题

1. React 19 兼容性：目前需使用 @canary 版本
2. 样式不生效：检查 CSS 导入顺序
3. 路径别名失效：重启 IDE 并验证配置

🚀 最佳实践

• 使用 @/components 导入自定义组件
• 定期更新 shadcn 组件库

参考文档

• Vite 官方文档
• Tailwind CSS v4 指南
• shadcn/ui 文档