react-js-pagination
react-js-pagination copied to clipboard
Tailwind Support
What if I use tailwind...
You can add tailwind styling to the component's prop. Something like this:
<Pagination
activePage={metaData?.current_page ?? 0}
itemsCountPerPage={metaData?.per_page ?? 0}
totalItemsCount={metaData?.total ?? 0}
onChange={(pageNumber) => {
getBlogData(pageNumber);
}}
pageRangeDisplayed={10}
itemClass="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"
linkClass="page-link"
firstPageText="First Page"
lastPageText="Last Lage"
innerClass="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"
activeClass="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"
itemClassFirst="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
itemClassLast="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
/>