React+Tailwind CSS+Shadcn UI

推荐常用网址

下面这个地址记录了前端常用的命令，以及学习教程等，推荐给各位

https://www.houdunren.com/doc/article/21/208

创建react项目首先需要准备好nodeJS环境，我这里使用的是vite脚手架

步骤如下：

1、创建项目

1npm create vite@latest my-project
2cd my-project

2、安装 Tailwind CSS

npm install tailwindcss @tailwindcss/vite

3、在vite.config.ts中引用

1import { defineConfig } from 'vite'
2import react from '@vitejs/plugin-react-swc'
3import tailwindcss from '@tailwindcss/vite'
4import path from "path"
5
6export default defineConfig({
7  plugins: [tailwindcss(),react()],
8  resolve: {
9    alias: {
10      "@": path.resolve(__dirname, "./src"),
11    },
12  },
13  server: {
14    open: true,
15  },
16})

4、在index.css中引入

@import "tailwindcss";

到这里Tailwind CSS就引入成功了，接下来安装Shadcn UI

5、打开https://ui.shadcn.com/docs/installation网址，选择vite

6、Vite - shadcn/ui根据说明进行操作

以上三步在上面已经完成了，就不需要再执行了

7、在tsconfig.json文件中添加compilerOptions

1{
2  "files": [],
3  "references": [
4    {
5      "path": "./tsconfig.app.json"
6    },
7    {
8      "path": "./tsconfig.node.json"
9    }
10  ],
11  "compilerOptions": {
12    "baseUrl": ".",
13    "paths": {
14      "@/*": ["./src/*"]
15    }
16  }
17}

8、在tsconfig.app.json中添加，这里上面已经添加过了，可以忽略

1{
2  "compilerOptions": {
3    // ...
4    "baseUrl": ".",
5    "paths": {
6      "@/*": [
7        "./src/*"
8      ]
9    }
10    // ...
11  }
12}

9、安装node类型

npm install -D @types/node

10、运行 init 命令来设置项目，系统会询问您要配置的几个问题，选择默认就行

npx shadcn@latest init

到这里就算添加完成了，接下来就可以安装需要的组件了

11、以按钮为例，每个组件都需要先安装才能使用，安装成功后，项目目录里会多出一个components/ui，所有安装好的组件都会放在这里面

npx shadcn@latest add button

在组件中使用：

1import { Button } from "@/components/ui/button"
2
3function App() {
4  return (
5    <div className="flex min-h-svh flex-col items-center justify-center">
6      <Button>Click me</Button>
7    </div>
8  )
9}
10
11export default App

12、到这里就结束了，可以运行一下你的项目了

《React+Tailwind CSS+Shadcn UI》是转载文章，点击查看原文。