forestry-wx/unocss.config.js

import { presetUni } from '@uni-helper/unocss-preset-uni';
import { defineConfig, presetIcons, presetAttributify, transformerDirectives, transformerVariantGroup } from 'unocss';

export default defineConfig({
    presets: [
        presetUni(),
        presetIcons({
            scale: 1.2,
            warn: true,
            extraProperties: {
                display: 'inline-block',
                'vertical-align': 'middle',
            },
        }),
        // 支持css class属性化, 可能会与ui的组件属性冲突
        presetAttributify({
            ignoreAttributes: [
                'color',
                // ...
            ],
        }),
    ],
    transformers: [
        // 启用指令功能：主要用于支持 @apply、@screen 和 theme() 等 CSS 指令
        transformerDirectives(),
        // 启用 () 分组功能
        // 支持css class组合，eg: `<div class="hover:(bg-gray-400 font-medium) font-(light mono)">测试 unocss</div>`
        transformerVariantGroup(),
    ],
    shortcuts: [
        {
            center: 'flex justify-center items-center',
        },
    ],
    rules: [
        [
            'p-safe',
            {
                padding: 'env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)',
            },
        ],
        ['pt-safe', { 'padding-top': 'env(safe-area-inset-top)' }],
        ['pb-safe', { 'padding-bottom': 'env(safe-area-inset-bottom)' }],
    ],
    theme: {
        colors: {
            /** 主题色，用法如: text-primary */
            primary: 'var(--wot-color-theme,#0957DE)',
        },
        fontSize: {
            /** 提供更小号的字体，用法如：text-2xs */
            '2xs': ['20rpx', '28rpx'],
            '3xs': ['18rpx', '26rpx'],
        },
    },
});