unocss css框架

（1）安装unocss

npm install unocss;

 （2）入口文件

import "unocss";

（3）配置uno.config.ts

import presetWeapp from 'unocss-preset-weapp';
import { extractorAttributify, transformerClass } from 'unocss-preset-weapp/transformer';
import { defineConfig, presetIcons } from 'unocss';

const { presetWeappAttributify, transformerAttributify } = extractorAttributify();

export default defineConfig({
  presets: [
    // https://github.com/MellowCo/unocss-preset-weapp
    presetWeapp({
      isH5: process.env.TARO_ENV === 'h5',
      platform: 'taro',
      taroWebpack: 'webpack5',
      designWidth: 375,
      deviceRatio: {
        640: 2.34 / 2,
        750: 1,
        828: 1.81 / 2,
        375: 2 / 1
      }
    }) as any,
    presetWeappAttributify(),
    presetIcons()
  ],
  shortcuts: [
    {
      'border-b': 'border-0 !border-b-1px border-b-solid border-b-#e9e9e9',
      'border-t': 'border-0 !border-t-1px border-t-solid border-t-#e9e9e9',
      'border-l': 'border-0 !border-l-1px border-l-solid border-l-#e9e9e9',
      'border-r': 'border-0 !border-r-1px border-r-solid border-r-#e9e9e9',
      tag: 'min-w-30px h-20px w-auto text-12px text-#619A4B center bg-#E8F4E4 rounded-99px px-8px',
      'tag-warn': 'min-w-30px h-20px w-auto text-12px text-#F54B45 center bg-#FFE2E1 rounded-99px px-8px',
      'tag-gray': 'min-w-30px h-20px w-auto text-12px text-black center bg-#F7F7F7 rounded-99px px-8px',
      'tag-orange': 'min-w-30px h-20px w-auto text-12px text-#EF6918 center bg-#FDECD7 rounded-99px px-8px',
      center: 'flex justify-center items-center'
    }
  ],

  transformers: [
    // https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerAttributify
    transformerAttributify() as any,

    // https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClass
    transformerClass() as any
  ],
  theme: {
    color: {
      bg: 'rgba(22, 33, 255, 1)'
    }
  }
});

（4）使用

<div class="w-100px"></div>