工具类层是 Tailwind 风格的原子类：一类只做一件事，靠组合覆盖布局需求。基线 2198 条规则，断点变体 5840 条，合计 8038 个类名，全部由 build/generators/ 下的刻度表生成，源码直接进版本库。
栅格与组件不在本页范围。栅格沿用 Bootstrap 的
.plui-col-md-6中缀写法，属组件层；见 COMPONENTS.md。
.plui-{断点}:{属性}-{取值}| 段 | 取值 | 说明 |
|---|---|---|
| 断点 | sm md lg xl xxl | 可省略。省略即为基线（xs，<576px）。 |
| 属性 | 见下表 | 必填，如 p text grid-cols。 |
| 取值 | 刻度表里的档位 | 可省略，如 .plui-flex、.plui-md:flex。 |
举例：
<div class="plui-p-4">四边内边距 4</div>
<div class="plui-md:p-8">md 起内边距 8</div>
<div class="plui-text-sm plui-lg:text-xl">小号，lg 起放大</div>
<div class="plui-grid plui-grid-cols-1 plui-md:grid-cols-3">一到三列</div>Tailwind 的取值里本来就有 sm md lg xl——字号有 sm、圆角有 md、阴影有 lg。如果把断点写成中缀（.plui-rounded-md），同一个类名会同时表示「圆角档位 md」和「md 断点起圆角」两种意思，产生二义类名。断点段前置后段位没有歧义，也和 Tailwind 的心智一致。
CSS 里冒号需要转义，源码写作 .plui-md\:p-4，HTML 里直接写 class="plui-md:p-4"。
| 名称 | 最小宽度 | 典型设备 |
|---|---|---|
| xs（基线） | 0 | 手机 |
| sm | 576px | 大屏手机 |
| md | 768px | 平板 |
| lg | 992px | 笔记本 |
| xl | 1200px | 桌面 |
| xxl | 1400px | 宽屏桌面 |
断点变体是移动优先的：min-width 命中后一直生效到更宽的断点。
| 分类 | 文件 | 基线条数 | 覆盖的属性 |
|---|---|---|---|
| 间距 | src/css/utilities/spacing.css | 1223 | m mt mr mb ml mx my ms me p pt pr pb pl px py ps pe inset inset-x inset-y top right bottom left scroll-m* scroll-p* gap gap-x gap-y space-x space-y |
| 颜色 | src/css/utilities/colors.css | 317 | bg text border fill stroke accent caret divide placeholder |
| 排版 | src/css/utilities/typography.css | 76 | text（字号/对齐）font font-style tracking leading uppercase lowercase capitalize underline overline line-through truncate break list |
| 布局 | src/css/utilities/layout.css | 207 | block inline inline-block flex inline-flex grid hidden static fixed absolute relative sticky float clear z w h min-w max-w min-h max-h overflow object aspect visibility transform scale rotate origin scroll align |
| 弹性与网格 | src/css/utilities/flexgrid.css | 193 | flex flex-grow flex-shrink basis order justify items content self place-items grid-cols grid-rows col-span row-span col-start row-start order |
| 边框 | src/css/utilities/borders.css | 99 | border border-t/r/b/l border-none rounded rounded-t/r/b/l divide outline ring |
| 效果 | src/css/utilities/effects.css | 57 | opacity shadow transition duration ease delay animate |
| 交互 | src/css/utilities/interactivity.css | 26 | cursor pointer-events select resize appearance touch sr-only visually-hidden not-sr-only |
断点变体按同样的分类拆在 src/css/responsive/ 下，同名文件对应同一分类。
间距：0 px 0.5 1 1.5 2 2.5 3 3.5 4 5 6 7 8 9 10 11 12 14 16 20 24 28 32 36 40 44 48 52 56 60 64 72 80 96，基准 0.25rem（4px）。m/p 系列支持负值（-4）。
颜色：中性 white black gray-50 … gray-900；语义 red blue green yellow indigo purple pink 的 500/600/700；语义别名 muted faint strong soft inverse，取自 tokens.css 的语义层，随主题变化。
字号：xs sm base lg xl 2xl 3xl 4xl 5xl 6xl 7xl 8xl 9xl。
圆角：none sm md lg xl 2xl 3xl full。极简风格下 none 为 0，sm 为 1px，其余统一 2px，full 为 9999px。
阴影：none sm md lg xl 2xl inner。映射为不同深浅的 1px 零偏移描边，不产生彩色或弥散阴影。
层级：z-0 z-10 z-20 z-30 z-40 z-50 z-60 z-70 z-80 z-90 z-100 z-auto。
过渡：duration-0 75 100 150 200 300 500 700 1000；ease-linear ease-in ease-out ease-in-out；delay-0 75 100 150 200 300 500 700 1000；animate-spin ping pulse bounce none。
<!-- 居中一行并留白 -->
<div class="plui-flex plui-items-center plui-justify-between plui-gap-3 plui-p-4">
<span>左侧</span>
<span>右侧</span>
</div>
<!-- 三列自适应网格，lg 起三列 -->
<div class="plui-grid plui-grid-cols-1 plui-lg:grid-cols-3 plui-gap-4">…</div>
<!-- 子元素之间自动加间距 -->
<div class="plui-stack plui-stack-2">…</div>
<div class="plui-flex plui-flex-col plui-gap-2">…</div>
<!-- 截断 -->
<div class="plui-truncate">很长的标题…</div>
<!-- 屏幕阅读器专用 -->
<span class="plui-sr-only">仅供读屏</span>工具类不是手写的，改动走刻度表：
build/generators/scales.js 里的刻度数组（间距、颜色、字号、圆角、阴影……）build/generators/<分类>.js 里的属性定义node build/gen-utilities.mjs 重新生成 src/css/utilities/ 与 src/css/responsive/node build/build.mjs 拼接产物生成器会先做类名重复自检，重复即中止生成，不会写出互相覆盖的规则。生成的文件头部带「本文件由 build/gen-utilities.mjs 生成，请勿手工修改」，不要直接改这些文件。
本页由 build/build-docs.mjs 从同名 Markdown 生成，请修改 .md 后重新生成，不要手工编辑本文件。