ssrskl / react-vite-template

React前端开发模板

React 开发模板

架构设计

Vite+React+TypeScript+Antd+Shadcn/UI+React-Router

插件

• axios：网络请求
• react-router-dom：路由
• dayjs：时间处理
• lodash：工具库
• swr：数据请求
• antd：UI 组件
• ahooks：React Hooks 库
• react-icons：图标库

pnpm install react-icons --save

• iconify：支持各种 svg 图标

pnpm install --save-dev @iconify/react

• react-type-animation：文字动画

pnpm install react-type-animation

• tailwindcss-animated：动画

参考网站:TailwindCSS 动画配置

pnpm install tailwindcss-animated

在tailwind.config.js中配置

module.exports = {
  // ...
  plugins: [require("tailwindcss-animated")],
};

问题解决

Antd 与 TailwindCSS 冲突

Antd 兼容三方样式库

@layer tailwind-base, antd;

@layer tailwind-base {
  @tailwind base;
}
@tailwind components;
@tailwind utilities;