如何将shadcn与react使用（javaScript，无打字稿）

使用vite和tailwind css 3.4.1构建react项目并集成shadcn ui组件

本文档指导您如何在不使用TypeScript的情况下，使用Vite构建一个React项目，并集成shadcn UI组件库。我们将使用Tailwind CSS 3.4.1版本，因为它与shadcn当前版本兼容性更好。

第一步：项目创建和Tailwind CSS安装

1. 使用Vite创建一个新的React项目：

   npm create vite@latest my-react-app -- --template react
   cd my-react-app

2. 安装Tailwind CSS 3.4.1及其依赖：

   立即学习“Java免费学习笔记（深入）”；

   npm install -D tailwindcss@3.4.1 postcss autoprefixer

3. 初始化Tailwind CSS配置：

   npx tailwindcss init -p

4. 在 src/index.css 文件顶部添加Tailwind CSS指令：

   @tailwind base;
   @tailwind components;
   @tailwind utilities;

5. 编辑 tailwind.config.js 文件，确保其内容如下：

   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: ["./index.html", "./src/**/*.{js,jsx}"],
     theme: {
       extend: {},
     },
     plugins: [],
   }

6. 创建 jsconfig.json 文件，并添加以下内容，用于路径别名：

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

第二步：安装和配置shadcn

1. 安装shadcn UI组件：

   

   Img.Upscaler

   免费的AI图片放大工具

   下载

   npx shadcn@latest init

   (选择 "New York" 主题和 "zinc" 颜色方案，并选择 "Use --force" 选项强制覆盖文件。)

2. 编辑 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组件

1. 在 src/App.jsx 中导入并使用shadcn组件，例如 Button 组件：

   import './App.css';
   import { Button } from '@shadcn/ui';
   
   function App() {
     return (
       Click Me
     );
   }
   
   export default App;

New York主题和Zinc颜色方案

shadcn的New York主题提供了一种现代且美观的UI风格，而Zinc颜色方案则提供了一组易于阅读且视觉上令人愉悦的颜色。两者结合使用，可以快速构建出高质量的用户界面。

预览:

通过以上步骤，您已经成功地在React项目中集成了shadcn UI组件库，并使用了Tailwind CSS进行样式控制。 记住在安装组件时选择 Use --force 选项来覆盖可能存在的冲突。