更新记录

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 及以上

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

v0.1.1 发布内容（填市场时用）

v0.1.1

▎修复 · 补全能力基于 HBuilderX 官方行内补全 API 重写（registerInlineCompletionItemProvider）， 彻底修复此前在部分版本下不提示的问题 · 激活机制适配 HBuilderX（启动即激活），不再依赖 VSCode 式 onLanguage 事件

▎功能 · 330+ 工具类 / 60+ 变体 / 22 色阶 + 主题色行内补全（Tab 接受） · 快捷方式 / prose / 图标 i-* / 任意值 / 任意属性 · 类名按目标端过滤，引擎升级即同步

▎运行要求 · HBuilderX 3.8.5 及以上

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

v0.1.0 首次发布

▎功能 · 330+ 原子化工具类补全（布局/盒模型/排版/视觉/变换/动效/网格/渐变/滤镜） · 60+ 变体补全（hover/focus/active/dark/断点/伪元素/表单状态/group/peer/aria/supports） · 22 个色阶 + 主题色（自动读取项目 uni.scss） · 快捷方式 / prose 排版 / 图标 i-* / 任意值 / 任意属性 · hover 即看 CSS 预览

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

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

平台兼容性

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

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

一、插件能干什么

在 HBuilderX 里写 class 时，行内补全原子化 CSS 工具类——输入时灰色文字建议完整类名，按 Tab 接受：

输入 fl          → 建议 flex / float-left / flex-col / flex-wrap …
输入 hover:bg-r  → 建议 hover:bg-red-500 / hover:bg-rose-500 …
输入 bg-uni      → 建议 bg-uni-color-primary（自动读你项目 uni.scss 的主题色）
输入 card        → 建议你配置的快捷方式 card

写样式不用再翻文档/查设计稿，类名即所得。

HBuilderX 的补全是行内建议（灰色文字，Tab 接受），不是下拉列表——这是 HBuilderX 插件 API 的机制。

二、安装

⚠️ 注意：HBuilderX 的「工具 → 插件安装」只能查看已安装的插件和安装 HBuilderX 自带的核心扩展，不能搜索第三方插件市场的插件。本插件要从插件市场网页安装。

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

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

三、使用方法

1. 基础补全

在任意 .vue / .nvue / .uvue / .html 的 class="..." 内输入即提示：

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

2. 变体补全（60+）

输入 hover:、dark:、sm:、before: 等前缀后继续输入，会提示对应变体类：

<button class="hover:bg-blue-600 active:scale-95 sm:p-4 dark:bg-black">
<view class="before:content-['>'] first:mt-0 checked:bg-green-500">

常用变体一览：

3. 主题色与快捷方式

插件自动读取项目根目录 uno.config.ts（或 atomic.config.js）：

// uno.config.ts
export default {
  theme: {
    uniScss: true,                        // 自动扫描 uni.scss 的 $uni-* 变量 → bg-uni-color-primary
    colors: { brand: "#2563eb" },         // bg-brand → #2563eb
    extend: { spacing: { 18: "4.5rem" } },// mt-18 → 4.5rem
  },
  shortcuts: {
    card: ["bg-white", "rounded-lg", "shadow-md", "p-4"],
    btn:  ["px-4", "py-2", "rounded-lg", "flex", "items-center", "justify-center"],
  },
}

配置后刷新即生效，card / btn / bg-brand 等直接在补全里出现。

4. 使用行内补全

• 在 class="..." 内输入，灰色文字会建议匹配的完整类名
• 按 Tab 接受建议，或继续输入过滤，Esc 取消
• 若灰色建议挡住了输入，直接继续打字即可（建议会自动跟随过滤）

四、支持的能力范围

• 330+ 工具类：布局（flex/grid/position）、盒模型（m/p/w/h）、排版（text/font/leading/tracking）、视觉（bg/border/rounded/shadow）、变换（translate/rotate/scale）、动效（transition/animate）、滤镜（blur/brightness）、渐变（bg-gradient）、分割（divide/space）等
• 任意值：w-[200px]、bg-[#3178c6]、text-[14px]、mt-[3rem]
• 任意属性：[color:red]、[--my-var:10px]
• 排版预设：prose / prose-lg / prose-red / prose-invert
• 图标：i-icon-home（字体图标）/ i-carbon-home（iconify / SVG 背景图）
• 负数：-mt-2；透明度：bg-red-500/50

五、注意与常见问题

六、版本记录

v0.1.2

• 补全读取改用官方 document.getText()（读内存当前文本），修复补全不生效
• 基于 HBuilderX 官方行内补全 API 重写（registerInlineCompletionItemProvider）
• 330+ 工具类 / 60+ 变体 / 22 色阶 + 主题色行内补全（Tab 接受）
• 快捷方式、prose、图标、任意值、任意属性
• 类名清单由引擎规则表派生，引擎升级即同步（零漂移）

开源协议：MIT · 引擎文档