`ts
import type { Preset, SourceCodeTransformer } from 'unocss'
import { defineConfig, presetAttributify } from 'unocss'

import {
presetApplet,
presetRemRpx,
transformerAttributify,
} from 'unocss-applet'

// uni-app
const isApplet = process.env?.UNI_PLATFORM?.startsWith('mp-') ?? false
// taro
// const isApplet = process.env.TARO_ENV !== 'h5' ?? false
const presets: Preset[] = []
const transformers: SourceCodeTransformer[] = []

if (isApplet) {
presets.push(presetApplet())
presets.push(presetRemRpx())
transformers.push(transformerAttributify({ ignoreAttributes: ['block'] }))
}
else {
presets.push(presetApplet())
presets.push(presetAttributify())
presets.push(presetRemRpx({ mode: 'rpx2rem' }))
}

export default defineConfig({
presets: [
// ...
...presets,
],
transformers: [
// ...
...transformers,
],
})
`

vite.config.ts（UnoCSS v0.58 和更低版本）/ vite.config.mts（UnoCSS v0.59 和更高版本）

`ts
// use @uni-helper/plugin-uni support ESM
import Uni from '@uni-helper/plugin-uni'
import UnoCSS from '@unocss/vite'
import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
plugins: [
Uni(),
UnoCSS() as any,
],
})
`

main.ts

`ts
import 'uno.css'
`

config/index.js（UnoCSS v0.59 和更高版本）

`js
import { createSwcRegister, getModuleDefaultExport } from '@tarojs/helper'

export default async () => {
createSwcRegister({
only: [filePath => filePath.includes('@unocss')],
})
const UnoCSS = getModuleDefaultExport(await import('@unocss/webpack'))
return {
mini: {
// ...
webpackChain(chain, _webpack) {
chain.plugin('unocss').use(UnoCSS())
}
},
h5: {
// ...
webpackChain(chain) {
chain.plugin('unocss').use(UnoCSS())
}
}
}
}
`

config/index.js（UnoCSS v0.58 和更低版本）

`js
import UnoCSS from '@unocss/webpack'

const config = {
mini: {
// ...
webpackChain(chain, _webpack) {
chain.plugin('unocss').use(UnoCSS())
},
},
h5: {
// ...
webpackChain(chain, _webpack) {
chain.plugin('unocss').use(UnoCSS())
},
},
}
`

app.ts

`ts
import 'uno.css'
``