首页 > 文章 > 前端

Tailwind 分页按钮快速样式实现方法

时间：2026-05-21 13:32:25 191浏览收藏

本文详解如何仅用 Tailwind CSS 内置工具类，零自定义 CSS、30 秒内构建语义清晰、响应式且完全可访问的分页按钮组——从 flex 布局与 space-x 间距控制，到当前页高亮（z-10 + aria-current="page"）、禁用态处理、省略号语义化、输入框防跳动与焦点强化，再到移动端换行适配（sm:flex-wrap + sm:space-y-1）和关键可访问性保障（role="navigation"、aria-label、focus-ring 偏移等），直击开发者常忽略却至关重要的语义标记与无障碍细节，让分页不只是“看起来对”，更是“用起来无障碍、读得懂、缩放友好、键盘可用”。

css 想快速实现分页按钮样式怎么办_使用 css tailwind pagination 工具类

直接用 Tailwind 的工具类组合出分页按钮，别写自定义 CSS

Tailwind 本身没有 pagination 组件，但用现成的间距、边框、颜色、圆角、悬停等工具类，30 秒就能搭出语义清晰、响应式友好的分页按钮组。关键不是“找 pagination 类”，而是理解分页结构怎么拆解。

分页容器和按钮的最小必要类组合

一个典型的分页结构是

包裹

里的
或

响应式断点和可访问性容易漏的细节

小屏下按钮挤在一起、键盘用户无法看到焦点、屏幕阅读器读不出当前页——这些不是“锦上添花”，是分页功能可用的前提。

移动端用 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" 属性，这是屏幕阅读器识别“这是当前页”的唯一标准方式
整个分页区域加 role="navigation" 和 aria-label="Pagination"，让辅助技术知道这是导航区块

<nav class="inline-flex items-center justify-center" role="navigation" aria-label="Pagination">
  <ul class="flex flex-wrap items-center -space-x-px sm:space-x-0 sm:space-y-1 sm:flex-col">
    <li>
      <a href="/?page=1" class="px-3 py-1.5 text-sm text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white">«</a>
    </li>
    <li>
      <a href="/?page=1" class="px-3 py-1.5 text-sm text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white">1</a>
    </li>
    <li>
      <span class="px-3 py-1.5 text-sm text-gray-500">…</span>
    </li>
    <li>
      <a href="/?page=5" class="px-3 py-1.5 text-sm text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white">5</a>
    </li>
    <li>
      <a href="/?page=6" class="px-3 py-1.5 text-sm text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white">6</a>
    </li>
    <li>
      <a href="/?page=7" class="px-3 py-1.5 text-sm text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white">7</a>
    </li>
    <li>
      <span class="px-3 py-1.5 text-sm text-gray-500">…</span>
    </li>
    <li>
      <a href="/?page=10" class="px-3 py-1.5 text-sm text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white">10</a>
    </li>
    <li>
      <a href="/?page=2" aria-current="page" class="z-10 px-3 py-1.5 text-sm font-medium text-white bg-blue-600 border border-blue-600 focus:z-10 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white">2</a>
    </li>
    <li>
      <a href="/?page=3" class="px-3 py-1.5 text-sm text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white">3</a>
    </li>
    <li>
      <a href="/?page=10" class="px-3 py-1.5 text-sm text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white">»</a>
    </li>
  </ul>
</nav>

真正卡住人的往往不是类名记不住，而是忘了 aria-current="page" 这种语义标记，或者在响应式切换时没重置 space-x 导致小屏按钮重叠。样式可以调，但可访问性和语义一旦漏掉，后期补成本远高于一开始写对。

到这里，我们也就讲完了《Tailwind 分页按钮快速样式实现方法》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！

资料下载

编程学习资料下载

精选编程（Golang、Python、Java、C++、JavaScript等）教程、电子书与示例源码，一键打包本地下载学习。

立即下载