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

React+Tailwind CSS+Shadcn UI

news 2025/11/7 8:53:37

推荐常用网址

yhttps://react.dev/learn/describing-the-ui

使用 Vite 安装 Tailwind CSS - Tailwind CSS

Introduction - shadcn/ui

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

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

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

步骤如下：

使用 Vite 安装 Tailwind CSS - Tailwind CSS

1、创建项目

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

2、安装 Tailwind CSS

npm install tailwindcss @tailwindcss/vite

3、在vite.config.ts中引用

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import tailwindcss from '@tailwindcss/vite'
import path from "path"export default defineConfig({plugins: [tailwindcss(),react()],resolve: {alias: {"@": path.resolve(__dirname, "./src"),},},server: {open: true,},
})

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

{"files": [],"references": [{"path": "./tsconfig.app.json"},{"path": "./tsconfig.node.json"}],"compilerOptions": {"baseUrl": ".","paths": {"@/*": ["./src/*"]}}
}

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

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

9、安装node类型

npm install -D @types/node

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

npx shadcn@latest init

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

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

npx shadcn@latest add button

在组件中使用：

import { Button } from "@/components/ui/button"function App() {return (<div className="flex min-h-svh flex-col items-center justify-center"><Button>Click me</Button></div>)
}export default App

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

查看全文

http://www.dtcms.com/a/577615.html