更新记录

0.1.5（2026-08-18） 下载此版本

▎新增 · 悬停详情如实显示编译输出（含 @media (hover: hover) 触屏保护层） · unit 三合一配置：字符串直接单位 / 数值系数 / 函数自定义；不配置默认数字×0.25×平台单位 · 引擎新增 rd-<数字> 圆角、bg-#hex 裸色（Windi 风格），构建端与插件同步 · 动态绑定完整支持：:class="$tools.className('p-20', 'text-26 lh-42rpx')" 补全 + 悬停、 三目表达式 ? 'w-28' : 'w-18' · class 类属性扩展：placeholder-class / active-class / hover-class / swiper-item-class 等 · 注释不标色（跨行 HTML/JS 注释） · 配置实时生效：改 window._uno（含当前页未保存）/ 配置文件，悬停前自动重建引擎，无需重启 · 非法输出全局修复：mt-lg / border-spacing-foo / translate-x-lg / aspect-foo 不再产出垃圾 CSS · 引擎 dist 同步重建，构建端与提示同一套代码

▎修复 · 动态绑定内补全/悬停失效（引号内类名被截断） · 悬停显示 .text-20\'\, 转义垃圾 · 只配 unit 的 vite.config.js 被忽略 · 跨行注释里的类被误标色

0.1.4（2026-08-18） 下载此版本

v0.1.4

▎新增 · 页面原子化类标记：玫红文字标记（默认 #F43F5E），可自定义 · 标记颜色/背景实时生效：设置 → 插件配置 → Atomic Uno CSS → markColor（文字色）/ markBackground（背景色，8位hex） · 颜色支持多格式：white / #fff / #F43F5E 自动归一化 · 悬停显示编译结果：来源 + 编译后 CSS · 组语法 hover:(a b) 补全与悬停

▎修复 · 补全改为代码助手下拉（HBuilderX 行内补全不会自动触发第三方插件） · 配置变化时旧装饰颜色残留 · 多配置文件（uno.config. / atomic.config. / window._uno）并存合并

▎运行要求 · HBuilderX 3.8.5 及以上

0.1.2（2026-08-17） 下载此版本

v0.1.2

▎修复 · 补全读取改用 HBuilderX 官方 document.getText()（读取内存中的当前文本）—— 彻底修复补全不生效：此前误用 fs 读磁盘旧内容，输入时匹配不到 class= · 基于 HBuilderX 官方行内补全 API（registerInlineCompletionItemProvider，3.8.5+） · 激活机制适配 HBuilderX（启动即激活，activationEvents: ["*"]）

▎功能 · 330+ 原子化工具类行内补全：布局/盒模型/排版/视觉/变换/动效/网格/渐变/滤镜 · 60+ 变体补全：hover/focus/active/dark/断点(sm-md-lg-xl)/伪元素/表单状态/ group/peer/aria/supports 等 · 22 个色阶 + 主题色：bg-red-500、text-blue-600、bg-uni-color-primary（自动读 uni.scss） · 快捷方式 / prose 排版 / 图标 i-* / 任意值 w-[100px] / 任意属性 [color:red] · 使用方式：输入时灰色文字建议完整类名，Tab 一键接受

▎实现 · 基于 HBuilderX 官方插件 API · 引擎内联，插件自包含，不依赖项目安装任何 npm 包

▎平台适配 · 类名按目标端过滤：小程序/nvue/uni-app x/快应用 差异自动处理 · 类名编码与构建产物一致（小程序端 safe class 名），所见即所得

▎性能 · 类名清单由引擎规则表派生，引擎升级即同步，无硬编码快照

▎运行要求 · HBuilderX 3.8.5 及以上

平台兼容性

原子化CSS 自动补全 — HBuilderX 插件使用说明

版本 0.1.3 · 配合引擎 @uno/uni-app（atomiccss）使用 支持文件：.vue / .nvue / .uvue / .html

一、插件能干什么

在 HBuilderX 里写 class 时，代码助手下拉补全原子化 CSS 工具类——打字自动弹出候选列表，回车/点击接受：

输入 fl          → 弹出 flex / float-left / flex-col / flex-wrap …
输入 hover:bg-r  → 弹出 hover:bg-red-500 / hover:bg-rose-500 …
输入 hover:(      → 组语法：hover:text-red / hover:text-12 …
输入 my-name      → 弹出你配置的快捷方式 my-name

页面类名标记

原子化工具类在编辑器里用玫红文字标记（默认 #F43F5E，颜色/背景均可配置），一眼认出哪些类可以悬浮看编译结果：

<view class="flex items-center justify-between p-4 mt-2 bg-red-500">
                 ↑ 这些类名显示为玫红文字（可配置颜色/背景）

同时注册了 tmLanguage 注入语法，class="..." 的值统一获得高亮 scope。

悬浮查看编译结果

鼠标悬停在任意类名（含 hover:(text-red text-12) 组）上，显示来源 + 编译后的 CSS：

来源: 用户配置 · uno.config.ts
.hover\:text-red:hover {
    color: #ff0000;
}

二、安装

1. 在 HBuilderX 里登录你的 DCloud 账号（帮助 → 登录；与插件市场同一账号）
2. 浏览器打开插件市场页（搜索「原子化CSS」）
3. 点页面上的「下载 / 安装」按钮
4. HBuilderX 会自动弹窗并完成安装（需 HBuilderX 保持运行、登录同一账号）
5. 安装完成提示后重启 HBuilderX

插件自包含：引擎已内联，不要求项目安装任何 npm 包。

三、配置读取

插件同时读取项目里所有存在的配置，自动合并（后列覆盖前列）：

// uno.config.ts —— 构建端
export default {
    theme: {
        colors: { brand: "#2563eb" }, // bg-brand → #2563eb
    },
    shortcuts: {
        card: ["bg-white", "rounded-lg", "shadow-md", "p-4"],
    },
};

// main.js —— 运行时页面级配置（与 uno.config.ts 共存，合并生效）
window._uno = {
    shortcuts: { "my-btn": "flex items-center rounded" },
    theme: { colors: { uni: "#007aff" } },
};

下拉补全里每个候选的右侧来源会精确显示来自哪个文件：用户配置 · uno.config.ts / 用户配置 · window._uno / 引擎规则。

数字类工具单位与换算（unit 三合一）

数字类工具（间距 mt-4 / pr-18、圆角 rd-20、宽度 w-10 等）的换算规则：

• 不配置 unit → 走默认换算：数字 × 0.25 × 平台默认单位（web=rem、小程序=rpx）
• 配置字符串 unit（"px"/"rpx"/"rem" 等）→ 数字直接加该单位（mt-4 = 4px），不乘系数
• 配置数值 unit → 每档系数：数字 × 系数 × 平台默认单位（unit: 0.5 → mt-4 = 2rem）
• 配置函数 unit → 完全自定义（unit: (n) =>${n * 2}px` →mt-4 = 8px`）

// uno.config.ts / window._uno / vite.config.ts 里都可配
export default {
    unit: "px",               // 字符串：直接单位（mt-4=4px、rd-20=20px）
    // unit: 0.5,             // 数值：每档系数（mt-4=2rem、rd-20=10rem）
    // unit: (n) => `${n * 2}px`, // 函数：完全自定义
};

说明：unit 配置同时作用于构建端和插件的标记/悬停/补全——改一处两边一致。补全/悬停详情会按你配置的单位显示换算值。

四、使用方法

1. 基础补全

在 .vue / .html 的 class="..." 内输入即弹出下拉候选：

<view
    class="flex items-center justify-between p-4 mt-2 bg-red-500 rounded-lg shadow-md"
></view>

2. 变体补全（60+）

输入 hover:、dark:、sm: 等前缀后继续输入，弹出对应变体类：

<button class="hover:bg-blue-600 active:scale-95 sm:p-4 dark:bg-black"></button>

常用变体一览：

3. 组语法

变体:(类1 类2 …) 一次性给多个类加同一个变体：

<view class="hover:(text-red text-12) sm:(mt-4 mb-4)"></view>

• 组内输入自动补全（前缀过滤）
• 悬停组前缀 hover: → 整体显示展开后的多条编译 CSS
• 悬停组内单个类 → 显示该类的编译 CSS

4. 悬停查看编译结果

鼠标悬停类名 → 显示来源 + 编译后 CSS（属性按 4 空格缩进、分号结尾）：

来源: 引擎规则
.flex {
    display: flex;
}

5. 页面类名标记颜色配置（自定义方法）

默认玫红文字 #F43F5E、无背景。改配置实时生效，无需重启。

步骤：

1. HBuilderX 菜单：工具 → 设置（或 Ctrl+,）
2. 搜索 atomic-uno
3. 找到「Atomic Uno CSS」分组修改：

4. 改完输入一个字或切换一下文件即生效（不必重启）

说明：HBuilderX 装饰字段经实测只有 color（文字色）和 backgroundColor（8位hex背景）渲染；border/outline/textDecoration（下划线）/fontWeight/图标附件等均不渲染，这是平台限制。

五、注意与常见问题

六、版本记录

v0.1.5

• 悬停详情如实显示编译输出（含 @media (hover: hover) 触屏保护层，不再剥掉）
• unit 三合一配置：字符串直接单位（unit:'px' → mt-4=4px）/ 数值系数 / 函数自定义；不配置默认 数字×0.25×平台单位
• 引擎新增 rd-<num> 数字圆角、bg-#hex 裸色（Windi 风格），构建端 + 插件同步
• 动态绑定完整支持：:class="$tools.className('p-20', 'text-26 lh-42rpx')" 补全 + 悬停、三目 ? 'w-28' : 'w-18'
• class 类属性扩展：placeholder-class / active-class / hover-class / swiper-item-class 等，构建端扫描同步
• 注释不标色（跨行 HTML / JS 注释）
• 配置实时生效：改 window._uno（含当前页未保存）/ 配置文件，悬停前自动重建引擎，无需重启
• 非法输出全局修复：mt-lg / border-spacing-foo / translate-x-lg / aspect-foo 不再产出垃圾 CSS
• 引擎 dist 同步重建，构建端与提示同一套代码

v0.1.4

• 标记颜色/背景可配置 + 实时生效（无需重启；改配置后输入一个字或切文件即刷新）
• 颜色支持多格式：#fff / white / red / #F43F5E 自动归一化
• 修复配置变化时旧装饰颜色残留
• 多配置源（uno.config. / atomic.config. / window._uno）并存深合并，来源精确到文件
• 组语法 hover:(a b) 补全 + 悬停（组前缀整体显示）
• 悬停显示编译后 CSS（来源 + 多行，分号结尾）
• tmLanguage 注入语法：class 值统一高亮 scope

v0.1.3

• 补全改为代码助手下拉（HBuilderX 行内补全不会自动触发第三方插件，已实测确认）
• 配置读取：uno.config. / atomic.config. / window._uno 多源并存深合并
• 来源精确到文件：用户配置 · uno.config.ts / 用户配置 · window._uno
• 悬停显示编译后 CSS（来源 + 多行，分号结尾）
• 组语法 hover:(a b) 补全 + 悬停（组前缀整体显示 / 组内单类显示）
• 页面类名标记：装饰 color（默认玫红 #F43F5E）+ 可选背景（atomic-uno.markColor / atomic-uno.markBackground）
• tmLanguage 注入语法：class 值统一高亮 scope

开源协议：MIT