wot-ui-unocss-preset-guide

Wot UnoCSS Preset 使用指南

适用场景

当用户询问以下内容时，优先使用本 Skill：

• 如何安装 @wot-ui/unocss-preset
• 如何在 unocss.config.ts 配置 presetWot
• prefix、preflight、baseTokens 怎么用
• 为什么类名不生效、自动补全不出现、CI 与本地结果不一致

目标是给出可直接复制的最佳实践，帮助用户快速完成接入并稳定运行。

最小安装步骤

pnpm add -D unocss
pnpm add @wot-ui/unocss-preset

推荐配置（完整示例）

import { presetWot } from '@wot-ui/unocss-preset'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetWot({
      prefix: 'wot',
      preflight: true,
      baseTokens: false,
    }),
  ],
})

配置项说明

• prefix：工具类前缀，默认 wot。示例：wot-text-primary、wot-m-main。
• preflight：是否注入 wot-ui CSS 变量，默认 true。
• baseTokens：是否开放基础色板和原始 token 类名，默认 false。

常用类名示例

• 颜色：wot-text-primary、wot-bg-danger-surface、wot-border-border-main
• 间距：wot-m-main、wot-gap-tight、wot-gap-x-loose
• 内边距：wot-p-main、wot-px-tight、wot-pb-loose
• 圆角：wot-rounded-md、wot-rounded-full
• 字重：wot-font-medium、wot-font-semibold
• 排版：wot-text-body-main、wot-text-title-large
• 透明度：wot-opacity-disabled
• 描边：wot-border-stroke-main

上手示例（可复制）

1) 一个“卡片”示例（uni-app / Vue）

<template>
  <view class="wot-bg-filled-oppo wot-rounded-2xl wot-p-super-loose wot-border-border-main wot-border-stroke-main">
    <text class="wot-text-title-large wot-text-text-main wot-font-semibold">
      Wot UnoCSS Preset
    </text>

    <view class="wot-mt-tight">
      <text class="wot-text-body-main wot-text-text-secondary">
        wot-text-body-main + wot-text-text-secondary
      </text>
    </view>

    <view class="wot-mt-loose wot-bg-primary wot-rounded-full wot-px-main wot-py-extra-tight">
      <text class="wot-text-label-large wot-text-text-white wot-font-semibold">
        wot-bg-primary
      </text>
    </view>
  </view>
</template>

2) 间距/布局示例（常见组合）

• 外边距：wot-mt-tight、wot-mt-main、wot-mt-super-loose
• 内边距：wot-p-loose、wot-px-main、wot-py-extra-tight
• 横向/纵向组合：wot-mx-main、wot-my-loose
• gap：wot-gap-tight、wot-gap-x-main、wot-gap-y-loose