Bug with Pagination as current page selection is not visible.

[adnankarim]

Describe the bug

When using the Pagination component in Flowbite React with Tailwind CSS in a NextJS project, the background or interface change for the current page indicator does not appear to be working.

Screenshots
If applicable, add screenshots to help explain your problem.

System information:

• Device: Core i7
• Resolution: 1080p
• OS: Windows 11
• Browser: Chrome
• Version: latest

Project information:

• Tailwind: 3.3.1
• Flowbite: ^1.6.5
• Flowbite React: ^0.4.3
• Type: CRA

[tulup-conner]

It's working at https://flowbite-react.com/pagination - Try upgrading to v0.4.4? There were some changes to this component recently, but I don't know why you'd be having this issue regardless.

[adnankarim]

I have updated the library still it is not showing selected page UI interface.

All Students

  </div>
  <div className=" px-4 container bg-white mx-auto z-[30] rounded-[10px]">
  <SearchFilterInput />
  <JourneyTable
    data={myData}
    columns={columns}
    selectable
    onRowClick={(rowData: any) => {
      console.log("Row clicked", rowData), alert(rowData);
    }}
  />

  <div className="flex items-center justify-center text-center py-5">
    <Pagination
      currentPage={currentPage}
      layout="pagination"
      onPageChange={onPageChange}
      showIcons={true}
      totalPages={1000}
      previousLabel=""
      nextLabel=""
    />
  </div>
  </div>
</div>

[Timtendo12]

It's working at https://flowbite-react.com/pagination - Try upgrading to v0.4.4? There were some changes to this component recently, but I don't know why you'd be having this issue regardless.

I have the same issue, It seems like the standard bg-white is overpowering the bg-blue

[adriangornypl]

Same problem here :) @Timtendo12 exactly as he described.

-- edit --

As a hotfix for anyone needing urgent fix I'd recommend applying the !important styles to globals -> usually shouldn't conflict with others, can also be limited to custom pagination class:

.bg-blue-50 {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(235 245 255 / var(--tw-bg-opacity)) !important;
}

.text-blue-600 {
    --tw-text-opacity: 1 !important;
    color: rgb(28 100 242 / var(--tw-text-opacity)) !important;
}

[IuriPires]

@adnankarim already opened a PR to resolve this issue: #725 waiting review.

[tcrz]

Still facing this same issue described by @Timtendo12

[tulup-conner]

Still facing this same issue described by @Timtendo12

The flowbite-react.com documentation for Pagination is working correctly, so I'm not really sure what to tell you in this case. If you can provide a reproduction of the issue with more specific detail and possibly explore why it might be happening to you specifically please feel free to create a new issue for it.