Styling is automatically defined to match with the Pagy gem's HTML and classes.
<nav class="pagy-nav pagination"><span class="page prev disabled">‹ Prev</span> <span class="page active">1</span> <span class="page"><a href="/docs/pagination?page=2" rel="next" >2</a></span> <span class="page"><a href="/docs/pagination?page=3" >3</a></span> <span class="page"><a href="/docs/pagination?page=4" >4</a></span> <span class="page"><a href="/docs/pagination?page=5" >5</a></span> <span class="page gap">…</span> <span class="page"><a href="/docs/pagination?page=50" >50</a></span> <span class="page next"><a href="/docs/pagination?page=2" rel="next" aria-label="next">Next ›</a></span></nav>
<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>