用tailwind工具类可快速构建语义化、响应式分页：flex+space-x-1布局，px-3/py-1.5/rounded-md基础样式，当前页加z-10/bg-blue-600/aria-current="page"，禁用态用opacity-50，移动端用sm:flex-wrap/sm:space-y-1，焦点环需focus:ring-offset-white配对。
直接用 Tailwind 的工具类组合出分页按钮，别写自定义 CSS。Tailwind 本身没有 pagination 组件，但用现成的间距、边框、颜色、圆角、悬停等工具类，30 秒就能搭出语义清晰、响应式友好的分页按钮组。
分页容器和按钮的最小必要类组合
一个典型的分页结构是 <nav></nav> 包裹 <ul></ul>，每个页码项是 <li> 里的 <a></a> 或 <button></button>。需要控制：对齐、间距、尺寸、状态样式、焦点可访问性。
-
flex+space-x-1实现水平排列与间隙（space-x-1比mx-1更可靠，避免首尾多出外边距） - 每个按钮用
px-3 py-1.5 text-sm rounded-md控制基础尺寸和圆角 - 默认态用
text-gray-700 bg-white border border-gray-300 - 当前页用
z-10 bg-blue-600 text-white border-blue-600（z-10防止被相邻按钮边框遮盖） - 禁用态（如「上一页」在第一页时）加
opacity-50 cursor-not-allowed
处理「省略号」和「跳转输入框」这类非数字按钮
分页里常有 … 或 <input type="number">，它们不能套用链接样式，需单独适配。
- 省略号用
<span class="text-gray-500">…</span>，保持垂直对齐并区分语义 -
<input>固定宽度防跳动：class="w-16 px-2 py-1.5 text-sm border border-gray-300 rounded-md focus:ring-1 focus:ring-blue-500 focus:border-blue-500" - 如果用
<button></button>做「GO」，务必加type="button"，避免表单意外提交
移动端换行和焦点环偏移必须手动配对
小屏下按钮挤在一起、键盘用户看不到焦点、屏幕阅读器读不出当前页——这些不是“锦上添花”，是分页功能可用的前提。
- 移动端用
sm:flex-wrap让按钮换行，配合sm:space-x-0 sm:space-y-1重置间隙方向 - 所有可交互元素必须有
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 -
focus:ring-offset-2要配合父容器focus:ring-offset-white（否则白底上环偏移不生效） - 每个当前页按钮必须带
aria-current="page"，否则屏幕阅读器无法识别
为什么不用 justify-center 而用 flex + space-x
justify-center 只控制主轴对齐，不解决按钮间间距一致性问题；而 flex space-x-1 是布局+间距一体化方案，且能天然兼容 sm:flex-wrap 后的换行间隙重置。
- 当按钮数量动态变化（比如后端返回 3～12 页），
justify-center容易导致左右不对称或末尾留白异常 -
space-x-1在换行后自动失效，配合sm:space-y-1才能保证竖向间隙统一 - 若用
gap-1替代space-x-1，需确保父容器是grid或启用了gap支持的flex（某些旧版浏览器不支持gap在flex中生效）
最易被忽略的是 focus:ring-offset-white 和 aria-current="page" 的配对使用——前者缺失会导致焦点环“漂浮”在按钮上方，后者缺失会让辅助技术完全跳过当前页状态。这两处不补，分页在可访问性检测中会直接失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
