Styling with tailwind and expanding click area

[m-abdurrehman]

Tailwind is being used in my app and payg gem(https://github.com/ddnexus/pagy) is being for pagination purposes.

I followed https://ddnexus.github.io/pagy/extras/tailwind#gsc.tab=0 to apply styling to my view to match looking the same as of my site.

Applied styling is something like

.pagy-nav {

}

.pagy-nav.pagination {
   display: inline-flex;
   border-radius: 0.375rem;
   z-index: 0;
   --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.pagy-nav .page {
   --tw-text-opacity: 1;
    color: rgba(136, 158, 137, var(--tw-text-opacity));
    font-size: 16px;
    font-weight: 500;
    align-items: center;
    display: inline-flex;
    border-width: 1px;
    border-color: #899E88;
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
    --tw-border-opacity: 1;
    border-color: rgba(192, 204, 218, var(--tw-border-opacity));
    padding: 0.75rem;
}

.pagy-nav .page:hover {
   background: #899E88;
   color: white;
   cursor: pointer;
}

.pagy-nav .disabled {
   color: gray;
}

.pagy-nav .active {
  background: #899E88;
  color: white;
  border-width: 1px;
  border-color: #899E88;
}

.pagy-nav .prev {
  color: gray;
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

strong{
font-weight: bolder !important;
}
.pagy-nav .next {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

Showing as

I try to make the complete box clickable by apply padding on the span and anchor tag but not working as expected.

HTML generated for the above template is

<nav class="pagy-nav pagination" role="navigation" aria-label="pager">
   <span class="page prev disabled">‹&nbsp;Prev</span>
   <span class="page active">1</span> 
   <span class="page">
        <a href="/tasks?page=2" rel="next">2</a>
   </span> 
   <span class="page">
       <a href="/tasks?page=3">3</a>
   </span>
   <span class="page">
        <a href="/tasks?page=4">4</a>
   </span> 
   <span class="page">
         <a href="/tasks?page=5">5</a>
   </span> 
   <span class="page gap">…</span>
   <span class="page">
         <a href="/tasks?page=12">12</a>
   </span> 
   <span class="page next">
          <a href="/tasks?page=2" rel="next" aria-label="next">Next&nbsp;›</a>
   </span>
</nav>

Note: This template is generated by pagy helper method, I don't feel the need to customize the default template.

Anybody with a solution/suggestion for this?

A demo application to play around is available here - https://github.com/benkoshy/pagy-rails/tree/tailwind

I also open an issue on pagy gem repo - ddnexus/pagy#320