Pagination

Styling is automatically defined to match with the Pagy gem's HTML and classes.

Default

<nav aria-label="Page navigation example">
  <div class="inline-flex flex-wrap items-center justify-start">
    <a class="bg-white rounded-tl rounded-bl border-l border-t border-b border-gray-400 py-2 px-4 link no-underline cursor-pointer hover:bg-gray-100" href="#">Previous</a>
    <a class="text-white no-underline border border-primary py-2 px-4 bg-primary cursor-pointer hover:bg-primary-600" href="#">1</a>
    <a class="bg-white link no-underline border-t border-b border-gray-400 p-2 px-4 cursor-pointer hover:bg-gray-200" href="#">2</a>
    <a class="bg-white link no-underline border-l border-t border-b border-gray-400 py-2 px-4 cursor-pointer hover:bg-gray-200" href="#" >3</a>
    <a class="bg-white rounded-tr rounded-br border border-gray-400 py-2 px-4 link no-underline cursor-pointer hover:bg-gray-200" href="#">Next</a>
  </div>
</nav>

Dark

<nav aria-label="Page navigation example">
  <div class="inline-flex flex-wrap items-center justify-start">
    <a class="rounded-tl rounded-bl bg-gray-800 text-white py-2 px-4 no-underline cursor-pointer hover:bg-gray-700" href="#">Previous</a>
    <a class="text-white no-underline py-2 px-4 bg-gray-700 cursor-pointer hover:bg-gray-700" href="#">1</a>
    <a class="no-underline bg-gray-800 text-white p-2 px-4 cursor-pointer hover:bg-gray-700" href="#">2</a>
    <a class="no-underline bg-gray-800 text-white py-2 px-4 cursor-pointer hover:bg-gray-700" href="#" >3</a>
    <a class="rounded-tr rounded-br bg-gray-800 text-white  py-2 px-4 no-underline cursor-pointer hover:bg-gray-700" href="#">Next</a>
  </div>
</nav>