react+ant.design+tailwindcss

快速理解语法
jsx使用{}写表达式，
注释也要写在{}中使用css注释

ant组件带的样式权重会比tailwindcss高，如果要穿透组件样式，在类名前加'!'号

组件文档：
https://ant-design.antgroup.com/components/overview-cn/
定制主题：
https://ant-design.antgroup.com/theme-editor-cn
模板：
https://landing.ant.design/index-cn
图表可视化库：
https://ant-design-charts.antgroup.com/
推荐组件：
https://ant.design/docs/react/recommendation-cn
后台框架：
https://pro.ant.design/zh-CN/
后台组件框架：
https://procomponents.ant.design/docs

npm config set registry https://registry.npmmirror.com 可选使用国内仓库
npm create vite mytest 创建一个ant demo项目
cd mytest 打开项目
npm install 安装依赖
npm run dev 运行

npm install antd --save 安装antd库

修改 src/App.js，引入 antd 的组件

js
import React from 'react';
import { Button } from 'antd';

const App = () => (
  <div className="App">
    <Button type="primary">Button</Button>
  </div>
);

export default App;

路由

npm install react-router-dom

安装tailwindcss

https://tailwindcss.com/docs/installation/using-vite
src\index.css的顶部导入
@import "tailwindcss";

图标可视化

npm install @ant-design/charts --save