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

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

    • [🌟 前言](#🌟 前言)
    • [一、创建 React 19 项目](#一、创建 React 19 项目)
    • [二、集成 Tailwind CSS](#二、集成 Tailwind CSS)
      • [1️⃣ 安装依赖](#1️⃣ 安装依赖)
      • [2️⃣ 配置 Vite 插件](#2️⃣ 配置 Vite 插件)
      • [3️⃣ 引入 Tailwind](#3️⃣ 引入 Tailwind)
      • [4️⃣ 启动项目](#4️⃣ 启动项目)
    • 三、配置路径别名
      • [1️⃣ 修改 TypeScript 配置](#1️⃣ 修改 TypeScript 配置)
      • [2️⃣ 安装类型声明](#2️⃣ 安装类型声明)
      • [3️⃣ 配置 Vite 别名解析](#3️⃣ 配置 Vite 别名解析)
    • [四、集成 shadcn/ui 组件库](#四、集成 shadcn/ui 组件库)
      • [1️⃣ 初始化配置](#1️⃣ 初始化配置)
      • [2️⃣ 添加示例组件](#2️⃣ 添加示例组件)
    • 五、项目结构预览
    • [💡 常见问题](#💡 常见问题)
    • [🚀 最佳实践](#🚀 最佳实践)
    • 参考文档

🌟 前言

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


一、创建 React 19 项目

使用 pnpm 快速初始化项目:

bash 复制代码
pnpm create vite --template=react-ts

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


二、集成 Tailwind CSS

1️⃣ 安装依赖

bash 复制代码
npm install tailwindcss @tailwindcss/vite

2️⃣ 配置 Vite 插件

修改 vite.config.ts

typescript 复制代码
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

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

3️⃣ 引入 Tailwind

修改 index.css, 顶部添加:

css 复制代码
@import "tailwindcss";

4️⃣ 启动项目

bash 复制代码
npm run dev

三、配置路径别名

1️⃣ 修改 TypeScript 配置

tsconfig.json

json 复制代码
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

tsconfig.app.json

json 复制代码
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

2️⃣ 安装类型声明

bash 复制代码
pnpm add -D @types/node

3️⃣ 配置 Vite 别名解析

更新 vite.config.ts

typescript 复制代码
import path from "path"
import { defineConfig } from "vite"

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

四、集成 shadcn/ui 组件库

1️⃣ 初始化配置

bash 复制代码
pnpm dlx shadcn@canary init

根据提示选择:

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

2️⃣ 添加示例组件

bash 复制代码
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 组件库

参考文档

相关推荐
X_StarX11 分钟前
【Unity笔记01】基于单例模式的简单UI框架
笔记·ui·unity·单例模式·游戏引擎·游戏开发·大学生
wen's8 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
Clair-Sean11 小时前
【交互设计】UI 与 UX 简介:从核心概念到行业实践
ui·ux
青皮桔11 小时前
CSS实现百分比水柱图
前端·css
失落的多巴胺11 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
牧杉-惊蛰13 小时前
uniapp微信小程序css中background-image失效问题
css·微信小程序·uni-app
Jackson_Mseven15 小时前
面试官:useEffect 为什么总背刺?我:闭包、ref 和依赖数组的三角恋
前端·react.js·面试
哎呦你好15 小时前
【CSS】Grid 布局基础知识及实例展示
开发语言·前端·css·css3
islandzzzz16 小时前
(第二篇)HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html
前端小盆友17 小时前
从零实现一个GPT 【React + Express】--- 【2】实现对话流和停止生成
前端·gpt·react.js