分页器尺寸由内边距、圆角、高度三者联动控制，非仅text类；推荐紧凑型（px-2.5 py-1 text-xs rounded-md）、标准型（px-3 py-1.5 text-sm rounded-md）、宽松型（px-4 py-2 text-base rounded-lg）三档组合，并需匹配py与text级别以保障垂直居中；响应式应反向定义断点（lg→md→sm），避免中屏跳变；高频尺寸建议在tailwind.config.js中扩展spacing与fontsize实现语义化复用；图标按钮须统一宽高基线，禁用scale缩放。
分页器尺寸不是靠 text-sm / text-lg 控制的
很多人以为改 text-sm 就能缩放整个分页按钮，结果只是文字变小、圆角和 padding 没跟上，按钮被压扁或间隙错乱。真正控制尺寸的是「内边距 + 圆角 + 高度」三者联动。Tailwind 没有 pagination-sm 这类预设类，必须手动组合。
推荐搭配方式：
-
px-2.5 py-1 text-xs rounded-md→ 紧凑型（适合表格行内嵌分页） -
px-3 py-1.5 text-sm rounded-md→ 默认标准尺寸（文档与大多数 UI 库对齐） -
px-4 py-2 text-base rounded-lg→ 宽松型（触控优先，移动端主推）
注意：py- 值要和 text- 级别匹配：text-xs 用 py-1，text-base 用 py-2；否则垂直居中失效，尤其在 flex 容器里会明显偏上或偏下。
响应式尺寸切换必须用断点前缀，不能只靠容器宽度
你写 sm:px-2 sm:py-1 sm:text-xs 是对的，但常见错误是只加了 sm: 却漏掉 md: 或 lg: —— 导致中屏（如 iPad 横屏）下尺寸突然跳回默认，按钮又变大，破坏一致性。
更稳妥的做法是「反向定义」：从最大断点开始设基础尺寸，再向下覆盖：
-
lg:px-4 lg:py-2 lg:text-base→ 大屏宽松 -
md:px-3 md:py-1.5 md:text-sm→ 中屏标准 -
sm:px-2.5 sm:py-1 sm:text-xs→ 小屏紧凑
这样能确保每个断点都有明确尺寸锚点，不会因 Tailwind 的 CSS 层叠顺序导致意外回退。另外，sm: 起点是 640px，如果你的分页器嵌在窄栅格（如 md:w-1/3）里，实际触发尺寸切换的视口可能远大于 640px，得结合父容器一起看。
自定义尺寸类名需要扩展 theme.extend.spacing 和 fontSize
如果项目里频繁用到「超紧凑分页」（比如日志列表底部），硬写一堆 xs:px-1.5 xs:py-0.5 xs:text-[10px] 很累，且 text-[10px] 不是响应式安全写法。更干净的方式是在 tailwind.config.js 里扩展：
module.exports = {
theme: {
extend: {
spacing: {
'pagination-xs': '0.25rem', // 对应 py-0.5
'pagination-sm': '0.375rem', // 对应 py-1.5
},
fontSize: {
'pagination-xs': ['0.625rem', { lineHeight: '1' }], // 10px
}
}
}
}
之后就能写 px-1.5 py-pagination-xs text-pagination-xs，语义清晰，也方便全项目复用。注意：扩展的 spacing 值必须是字符串（带单位），不能是数字；fontSize 必须配 lineHeight，否则小字号下文字上下留白失衡。
图标按钮尺寸容易不一致，必须统一约束宽高
分页里的「上一页」「下一页」常带 SVG 或 icon 字体，但 size-8 和 text-sm 按钮混排时，图标按钮视觉上总显得更大——因为 SVG 默认按 em 缩放，而文字按 font-size 缩放，两者基准不同。
解决方法只有两个：
- 所有图标按钮强制固定尺寸：
size-8 flex items-center justify-center，并确保 SVG 内部viewBox是 0 0 24 24 这类规整比例 - 改用
text-sm下的等宽字体图标（如 Heroicons 的h-5 w-5），避免用size-类
千万别用 scale-90 临时压图标——它会影响点击热区，且在 transform 后的元素上，focus:ring 可能错位。最稳的是从根上统一尺寸基线。
真正难的不是写几个类，而是让「数字按钮」「省略号」「图标按钮」「输入框」四类元素在所有尺寸下都保持视觉节奏一致。它们的 padding、line-height、border-radius、甚至 focus-ring 偏移量，都得按同一套比例推演，否则一换断点就露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
