1.React 和 Vite 环境下 TailwindCSS 的配置指南2024-08-24 收起 1. 安装tailwindcssnpm install -D tailwindcss postcss autoprefixer2. 生成tailwindcss 配置文件npx tailwind init -p3. tailwind.config.js 配置/** @type {import('tailwindcss').Config} */ export default { content: [ "./index.htm...
npm create vite@latest project-name -- --template react 更改project-name为你的项目名称。 这里我们将项目名称取为Demo项目。 所以我们的命令是: npm create vite@latest demo-project -- --template react 该命令将创建我们的项目文件夹。 注意:这里--template react指定我们正在使用 Vite 创建一个 React App...
npm create vite@latest my-react-app -- --template react-ts 命令执行完之后,我们就获得了一个配置好的react + ts的项目。 配置tailwind css 我们首先从通过包管理工具安装tailwindcss,执行下面的命令 npm install -D tailwindcss@latest postcss@latest autoprefixer@latest 因为tailwind不会自动添加浏览器引擎的...
# eslint --> .eslintrc.cjs pnpm add -D eslint eslint-config-react-app npm init @eslint/config # Prettier prettier 是一个代码格式化工具 - prettierrc.cjs , pnpm add -D prettier eslint-config-prettier @trivago/prettier-plugin-sort-imports eslint-plugin-prettier # 创建配置文件 -- 配置后...
在Vite 中设置 React 创建Vite 项目后,导航到项目目录并运行npm install。 创建第一个组件 在src文件夹中创建一个新组件,例如Popup.tsx: 代码语言:javascript 复制 importReactfrom"react";constPopup:React.FC=()=>(Hello,Chrome Extension!);exportdefaultPopup; 现在在我们的App.tsx文件中,我们需要导入刚刚创建...
React Tilt是一个很酷的工具,它为我们的网站元素添加了运动和动画效果。通过给元素添加浮动和倾斜效果,使页面看起来更有趣。React Tilt易于使用,为我们的应用程序带来一丝魔法的触感。 入门步骤 首先,使用Vite创建一个新的React应用,并添加TailwindCSS。接下来,添加React Tilt: ...
1. 使用vite创建新项目，命令如下：npm create vite my-react-app2. 进入项目文件夹并安装依赖：cd my-react-appnpm install react react-dom react-router-dom redux react-redux axios antd tailwindcss @tailwindcss/ui接着，配置路由和Redux：创建`routes.js`并定义路由，如Home路由：import { ...
MutationObserver 控制 antdesign 暗黑模式,react 中控制 tailwindcss 与 antdesign 暗黑模式切换 1452 -- 1:41 App 语音转文字,提升输入效率,非常方便 827 -- 2:33 App TS 面试题?怎么获取TS类型的值?答案揭晓 ! 1924 -- 9:28 App Reducer 在 React 中的使用技巧 4212 3 1:56 App postcss 是做什...
安装 生成 tailwind.config.js 之后更改内容 postcss.config.js 然后 vite添加这个内容 最后建个 css文件 , 在 main.jsx...
首先，使用 Vite 创建一个全新的 React + TypeScript 项目。Vite 的强大性能和高效开发体验使其成为现代项目构建的理想选择。其次，遵循提示安装项目所需的依赖。确保正确安装 Ant Design 相关依赖，以便集成这一业界广泛使用的 UI 组件库。接着，对 Vite 配置文件进行调整，以更好地适应 React + Type...