使用vite和tailwind css 3.4.1构建react项目并集成shadcn ui组件
本文档指导您如何在不使用TypeScript的情况下，使用Vite构建一个React项目，并集成shadcn UI组件库。我们将使用Tailwind CSS 3.4.1版本，因为它与shadcn当前版本兼容性更好。
第一步：项目创建和Tailwind CSS安装
使用Vite创建一个新的React项目：
npm create vite@latest my-react-app -- --template reactcd my-react-app
登录后复制
安装Tailwind CSS 3.4.1及其依赖：
立即学习“Java免费学习笔记（深入）”；
npm install -D tailwindcss@3.4.1 postcss autoprefixer
登录后复制
初始化Tailwind CSS配置：
npx tailwindcss init -p
登录后复制
在 src/index.css 文件顶部添加Tailwind CSS指令：
@tailwind base;@tailwind components;@tailwind utilities;
登录后复制
编辑 tailwind.config.js 文件，确保其内容如下：
/** @type {import('tailwindcss').Config} */module.exports = { content: ["./index.html", "./src/**/*.{js,jsx}"], theme: { extend: {}, }, plugins: [],}
登录后复制
创建 jsconfig.json 文件，并添加以下内容，用于路径别名：
{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./src/*"] } }}
登录后复制
第二步：安装和配置shadcn
安装shadcn UI组件：
npx shadcn@latest init
登录后复制
(选择 “New York” 主题和 “zinc” 颜色方案，并选择 “Use –force” 选项强制覆盖文件。)
编辑 vite.config.js 文件，添加路径别名，确保其内容如下：
import { defineConfig } from 'vite';import react from '@vitejs/plugin-react';import path from 'path';export default defineConfig({ plugins: [react()], resolve: { alias: { '@': path.resolve(__dirname, './src'), }, },});
登录后复制
第三步：使用shadcn组件
在 src/App.jsx 中导入并使用shadcn组件，例如 Button 组件：
import './App.css';import { Button } from '@shadcn/ui';function App() { return ( );}export default App;
登录后复制
New York主题和Zinc颜色方案
shadcn的New York主题提供了一种现代且美观的UI风格，而Zinc颜色方案则提供了一组易于阅读且视觉上令人愉悦的颜色。两者结合使用，可以快速构建出高质量的用户界面。
预览:
通过以上步骤，您已经成功地在React项目中集成了shadcn UI组件库，并使用了Tailwind CSS进行样式控制。 记住在安装组件时选择 Use –force 选项来覆盖可能存在的冲突。
以上就是如何将shadcn与react使用（javaScript，无打字稿）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2640405.html
