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

难点：接入了好久好久tailwind，均失败

知识点：经过群友提醒，还有个unocss，一拍大腿，才想起来，参考链接，或者跟着我走

1.先下载相关依赖

pnpm add -D unocss unocss-preset-weapp

2.在vite.config.ts中插入配置

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import Unocss from 'unocss/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    uni(),
    // https://github.com/antfu/unocss
    Unocss(),
  ],
})

3.配置unocss.config.ts

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

const { presetWeappAttributify, transformerAttributify } = extractorAttributify()

export default {
  presets: [
    // https://github.com/MellowCo/unocss-preset-weapp
    presetWeapp(),
    // attributify autocomplete
    presetWeappAttributify(),
  ],
  shortcuts: [
    {
      'border-base': 'border border-gray-500_10',
      'center': 'flex justify-center items-center',
    },
  ],

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

    // https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClass
    transformerClass(),
  ]
}

3.在main.js中引入

import 'uno.css'

4.大功告成，默认兼容tailwindCss，这个很爽啊！更多玩法可以去官网看看

别的端可以也接入tailwindCSS，看我写的博文

vue3、react和taro/react配置tailwindCSS

微信原生小程序接入 unocss

react 接入 unocss