当前位置: 首页 > news >正文

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

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

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

Vite+React+Tailwind+shadcn

🌟 前言

随着 React 19 的发布,开发者对高效开发工具链的需求日益增加。本文将手把手教你如何通过 Vite 快速搭建 React 19 项目,并整合 Tailwind CSSshadcn/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 文档

相关文章:

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

使用 Vite React 19 集成 Tailwind CSS 与 shadcn/ui 组件库完整指南 🌟 前言一、创建 React 19 项目二、集成 Tailwind CSS1️⃣ 安装依赖2️⃣ 配置 Vite 插件3️⃣ 引入 Tailwind4️⃣ 启动项目 三、配置路径别名1️⃣ 修改 TypeScript 配置2️⃣ 安装类型声明3…...

【java】基本数据类型和引用数据类型

在 Java 中,数据类型分为 基本数据类型 和 引用数据类型。它们的本质区别在于存储方式和操作方式。下面我会详细解释这两种数据类型,并用通俗易懂的语言帮助你理解。 1. 基本数据类型(Primitive Data Types) 基本数据类型是 Java…...

mybatis-lombok工具包介绍

Lombok是一个实用的]ava类库,能通过注解的形式自动生成构造器、getter/setter、equals、hashcode、toString等方法,并可以自动化生成日志变量,简化java开发、提高效率。 使用前要加入Lombok依赖...

2. grafana插件安装并接入zabbix

一、在线安装 如果不指定安装位置,则默认安装位置为/var/lib/grafana/plugins 插件安装完成之后需要重启grafana 命令在上一篇讲到过 //查看相关帮助 [rootlocalhost ~]# grafana-cli plugins --help //从列举中的插件过滤zabbix插件 [rootlocalhost ~]# grafana…...

零基础学CocosCreator·第九季-网络游戏同步策略与ESC架构

课程里的版本好像是1.9,目前使用版本为3.8.3 开始~ 目录 状态同步帧同步帧同步客户端帧同步服务端ECS框架概念ECS的解释ECS的特点EntityComponentSystemWorld ECS实现逻辑帧&渲染帧 ECS框架使用帧同步&ECS 状态同步 一般游戏的同步策略有两种:…...

为什么配置Redis时候要序列化配置呢

序列化和反序列化?: 序列化:将对象转换为二进制数据,以便存储到Redis中。 反序列化:将Redis中的二进制数据转换回对象,以便在应用程序中使用。 1. 默认序列化器的问题 如果不配置序列化器,Re…...

使用爬虫获取1688商品分类:实战案例指南

在电商领域,获取商品分类信息对于市场分析、选品决策和竞争情报收集至关重要。1688作为国内领先的B2B电商平台,提供了丰富的商品分类数据。通过爬虫技术,我们可以高效地获取这些分类信息,为商业决策提供有力支持。 一、为什么选择…...

C#打印设计器

C# 打印设计器,功能强大却操作简单,小白也能快速上手! 主要功能: 支持多种设计元素: 文字、图片、图形、二维码、条形码等,满足您多样化的设计需求。 灵活排版,精准定位: 支持拖拽…...

Codeforces Round 1004 (Div. 2)(A-E)

题目链接&#xff1a;Dashboard - Codeforces Round 1004 (Div. 2) - Codeforces A. Adjacent Digit Sums 思路 只有两种情况&#xff1a;n1之后没有进位&#xff0c;y-x1。n1之后进位(y-x-1)%90。 代码 void solve(){int x,y;cin>>x>>y;if(y-x1){cout<<…...

pnpm的使用

pnpm的使用 1.安装和使用2.统一包管理工具下载依赖 1.安装和使用 pnpm:performant npm &#xff0c;意味“高性能的npm”。 pnpm由npm/yarn衍生而来,解决了npm/yarn内部潜在的bug,极大的优化了性能,扩展了使用场景。被誉为“最先进的包管理工具”。 pnpm安装指令: npm i -g p…...

vscode调试redis

系统&#xff1a;ubuntu redis&#xff1a;redis-6.0.3 1.在vs中安装c/c编译插件 2.用vscode打开redis-6.0.3 3.在菜单中找到run->Add Configuration… 4.会在目录中生成一个./vscode目录&#xff0c;里面包含launch.json,修改launch.json中的program:${workspaceFolder}…...

Windows逆向工程入门之汇编指令格式与操作数类型

公开视频 -> 链接点击跳转公开课程博客首页 -> ​​​链接点击跳转博客主页 目录 一、汇编指令格式基础 二、操作数类型详解 1. 立即数&#xff08;Immediate&#xff09; 2. 寄存器操作数&#xff08;Register&#xff09; 3. 内存操作数&#xff08;Memory&#…...

亚远景-ASPICE 4.0与敏捷开发:如何实现高效协同

ASPICE 4.0与敏捷开发的结合是汽车软件开发领域的重要趋势。通过合理融合&#xff0c;可以实现高效协同&#xff0c;提升软件开发的质量和效率。以下是实现高效协同的关键要点&#xff1a; 1. 理解ASPICE 4.0与敏捷开发的互补性 ASPICE 4.0强调软件开发过程的规范性、可追溯性…...

pptx文档提取信息

目录 一、前言二、python-pptx提取核心代码三、LibreOffice 转换pdf再提取的核心代码一、前言 pptx文档提取解析常用的库。 如果只需要解析 .pptx 的文本、表格、图片,推荐使用 python-pptx(开源,轻量级)。 如果需要高性能、支持 .ppt、动画、格式转换,推荐 Aspose.Slid…...

蓝桥杯篇---超声波距离测量频率测量

文章目录 简介第一部分&#xff1a;超声波的简介工作原理1.发射超声波2.接收反射波3.计算时间差4.计算距离 硬件连接1.Trig2.Echo 示例代码代码说明注意事项1.声速2.延时精度3.硬件连接 第二部分&#xff1a;频率测量简介频率测量原理1.信号输入2.计数3.计算频率 硬件连接示例代…...

ML.Net二元分类

ML.Net二元分类 文章目录 ML.Net二元分类前言项目的创建机器学习模型的创建添加模型选择方案训练环境的选择训练数据的添加训练数据的选择训练数据的格式要预测列的选择模型评估模型的使用总结前言 ‌ML.NET‌是由Microsoft为.NET开发者平台创建的免费、开源、跨平台的机器学习…...

vite让每个scss文件自动导入某段内容

写了如下一个scss函数&#xff0c;希望自动导入到每个scss文件里面 vite.config.ts里面如下配置 import fs from fsconst filePath resolve(__dirname, ./src/assets/css/index.scss);const Minxcss fs.readFileSync(filePath, utf8); css: {preprocessorOptions: {scss: {…...

分享一个使用的音频裁剪chrome扩展-Ringtone Maker

一、插件简介 铃声制作器是一个简单易用的 Chrome 扩展&#xff0c;专门用于制作手机铃声。它支持裁剪音频文件的特定片段&#xff0c;并将其下载为 WAV 格式&#xff0c;方便我们在手机上使用。无论是想从一段长音频中截取精彩部分作为铃声&#xff0c;还是对现有的音频进行个…...

基于Python的Optimal Interpolation (OI) 方法实现

前言 Optimal Interpolation (OI) 方法概述与实现 Optimal Interpolation (OI) 是一种广泛应用于气象学、海洋学等领域的空间数据插值方法。该方法通过结合观测数据与模型预测数据&#xff0c;最小化误差方差&#xff0c;从而实现对空间数据的最优插值。以下是OI方法的一般步骤…...

初学 mybatis

前言 回顾之前 不使用 mybatis 框架&#xff0c;我们是怎么通过Java 操作数据库的 "jdbc" 前提&#xff1a;使用maven 构建的项目 1 添加 关于jdbc 的依赖&#xff0c;以及辅助操作数据库的 commons-dubli jar包 截取 前后端项目 2 添加配置文件里面内容有&…...

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

多云管理“拦路虎”:深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

NLP学习路线图(二十三):长短期记忆网络(LSTM)

在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时,会出现小数部分被截断的情况。典型错误模式如下: void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

五子棋测试用例

一.项目背景 1.1 项目简介 传统棋类文化的推广 五子棋是一种古老的棋类游戏&#xff0c;有着深厚的文化底蕴。通过将五子棋制作成网页游戏&#xff0c;可以让更多的人了解和接触到这一传统棋类文化。无论是国内还是国外的玩家&#xff0c;都可以通过网页五子棋感受到东方棋类…...

6.9本日总结

一、英语 复习默写list11list18&#xff0c;订正07年第3篇阅读 二、数学 学习线代第一讲&#xff0c;写15讲课后题 三、408 学习计组第二章&#xff0c;写计组习题 四、总结 明天结束线代第一章和计组第二章 五、明日计划 英语&#xff1a;复习l默写sit12list17&#…...

零基础在实践中学习网络安全-皮卡丘靶场(第十一期-目录遍历模块)

经过前面几期的内容我们学习了很多网络安全的知识&#xff0c;而这期内容就涉及到了前面的第六期-RCE模块&#xff0c;第七期-File inclusion模块&#xff0c;第八期-Unsafe Filedownload模块。 什么是"遍历"呢&#xff1a;对学过一些开发语言的朋友来说应该知道&…...

C++ Saucer 编写Windows桌面应用

文章目录 一、背景二、Saucer 简介核心特性典型应用场景 三、生成自己的项目四、以Win32项目方式构建Win32项目禁用最大化按钮 五、总结 一、背景 使用Saucer框架&#xff0c;开发Windows桌面应用&#xff0c;把一个html页面作为GUI设计放到Saucer里&#xff0c;隐藏掉运行时弹…...