react-js-pagination icon indicating copy to clipboard operation
react-js-pagination copied to clipboard

Tailwind Support

Open victormongi opened this issue 4 years ago • 1 comments

What if I use tailwind...

victormongi avatar Mar 04 '20 03:03 victormongi

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"
/>

badasukerubin avatar Mar 29 '22 14:03 badasukerubin