How to Implement Pagination Functionality in React using Tailwind CSS

1. Set up your React project:

   • Create a new React project or navigate to your existing project directory.
   • Install the required dependencies by running the following command:

     npm install react react-dom tailwindcss
     

2. Create a Pagination component:

   • In your project's src directory, create a new file called Pagination.js.
   • Open Pagination.js and import the necessary React components and hooks:

     import React from 'react';
     

   • Create a functional component called Pagination:

     function Pagination() {
       return (
         <div className="flex justify-center mt-4">
           {/* Pagination component code goes here */}
         </div>
       );
     }
     export default Pagination;
     

3. Add pagination logic:

   • Within the Pagination component, define the necessary state variables and functions:

     function Pagination() {
       const [currentPage, setCurrentPage] = React.useState(1);
       const totalPages = 10; // Replace with the actual total number of pages
            
       const goToPage = (pageNumber) => {
         setCurrentPage(pageNumber);
       };
       
       // Add additional logic to fetch data and update the total number of pages
       
       return (
         <div className="flex justify-center mt-4">
           {/* Pagination component code goes here */}
         </div>
       );
     }
     

4. Render pagination buttons:

   • Within the Pagination component, render the pagination buttons based on the current page and total number of pages:

     function Pagination() {
       // Existing code
            
       return (
         <div className="flex justify-center mt-4">
           {Array.from({ length: totalPages }, (_, i) => (
             <button
               key={i}
               className={`mx-1 px-3 py-1 rounded-md ${
                 currentPage === i + 1 ? 'bg-blue-500 text-white' : 'bg-gray-200'
               }`}
               onClick={() => goToPage(i + 1)}
             >
               {i + 1}
             </button>
           ))}
         </div>
       );
     }
     

5. Style the pagination component using Tailwind CSS:

   • Open your project's main CSS file (e.g., src/index.css) and import Tailwind CSS:

     @import 'tailwindcss/base';
     @import 'tailwindcss/components';
     @import 'tailwindcss/utilities';
     

   • Customize the styling of the pagination buttons according to your requirements. For example, you can add the following styles to the main CSS file:

     .pagination button {
       transition: background-color 0.3s, color 0.3s;
     }
          
     .pagination button:hover {
       background-color: #4299e1;
       color: #ffffff;
     }
     

   • Apply the pagination class to the container <div> in the Pagination component:

     function Pagination() {
       // Existing code
         
       return (
         <div className="flex justify-center mt-4 pagination">
           {/* Pagination buttons */}
         </div>
       );
     }
     

6. Use the Pagination component in your application:

   • Open the file where you want to use the pagination functionality.
   • Import the Pagination component: ```jsx import Pagination from