react 接入 unocss

难点：之前以为和 taro/react 中一样呢，结果试了下不通，索性再写一个

知识点：纯react接入 unocss

1.下载unocss，我这里是0.58版本的，如果有报错，可以降级成0.58，目前发现0.6的版本会不兼容，暂时没细研究原因

pnpm install unocss@0.58 -D

2.根目录下创建文件 unocss.config.tsx，其他配置自行研究

import { defineConfig, presetAttributify, presetUno } from "unocss";
export default defineConfig({
  presets: [
    presetAttributify(),
    presetUno(),
  ],
  // 自定义一些样式
  shortcuts: {
    'center': 'flex items-center justify-center',
    'primary-color': 'text-#227fd9',
    'bg-primary-color': 'bg-#227fd9',
    'border-primary-rounded': 'border-#ddd border-1 border-solid rounded-full',
    'itemCenter': 'absolute left-50% top-50% transform -translate-x-50% -translate-y-50%',
  }
});

3.文件 vite.config.ts 中添加配置

import UnoCss from "unocss/vite";

defineConfig({
  plugins: [
    // 你的其他配置
    UnoCss(),
    // 你的其他配置
  ]
})

4. main.tsx 中配置样式

//  ...
import "virtual:uno.css"
//  ...

5.有兴趣的可以看我写的其他端接入unocss，大家可以多提提意见

hbx/uni3/vite/微信小程序 接入unocss

微信原生小程序接入 unocss

vue3、react和taro/react（h5和小程序）配置tailwindCSS