styling with tailwind and click area

[m-abdurrehman]

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.

my styling

.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;
}

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>

Anybody with a solution/suggestion for this?

In my opinion, if anchor tag surrounds span that may solve the issue.

An update may require only in https://github.com/ddnexus/pagy/blob/9a14400695d6a972d11efc43f5fd3f4f8194ac43/lib/templates/nav.html.haml https://github.com/ddnexus/pagy/blob/9a14400695d6a972d11efc43f5fd3f4f8194ac43/lib/templates/nav.html.slim https://github.com/ddnexus/pagy/blob/9a14400695d6a972d11efc43f5fd3f4f8194ac43/lib/templates/nav.html.erb

[ddnexus]

There is no need to change the html and break all the pagy based apps! Tailwind can apply any style to anything.

You can look into apps that use tailwind with pagy in order to get working examples to copy from or ask support for using Tailwind in the proper channels.

[m-abdurrehman]

Thanks for your response! If you feel it will break the apps we can keep the anchor tags in span and only remove/set href in spans.

Can you share any app that is behaving as I have posted. I have posted on the support channel.

I think the issue should be re-understand deeply.

[ddnexus]

https://avohq.io

[m-abdurrehman]

thanks