Creating a pagination component using react-paginate and tailwind css in React.

In this tutorial, we will be building a pagination component using React and the react-paginate library with Tailwind CSS for styling.

Step 1: Setting up the project
First, create a new React project using Create React App by running the following command:

npx create-react-app react-pagination
cd react-pagination

Next, install the react-paginate library and Tailwind CSS by running the following commands:

npm install react-paginate
npm install tailwindcss

Step 2: Configuring Tailwind CSS
To configure Tailwind CSS, create a tailwind.config.js file in the root of your project and paste the following configuration:

module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Then, create a styles.css file in the src directory and import Tailwind CSS styles like this:

@tailwind base;
@tailwind components;
@tailwind utilities;

Finally, import the styles.css file in your index.js file:

import './styles.css';

Step 3: Building the Pagination component
Create a new file called Pagination.js in the src directory and add the following code:

import React from 'react';
import ReactPaginate from 'react-paginate';

const Pagination = ({ pageCount, onPageChange }) => {
  return (
    <div className="pagination">
      <ReactPaginate
        pageCount={pageCount}
        marginPagesDisplayed={2}
        pageRangeDisplayed={5}
        onPageChange={onPageChange}
        containerClassName={'pagination'}
        activeClassName={'active'}
      />
    </div>
  );
};

export default Pagination;

Step 4: Creating the main App component
Open the App.js file in the src directory and replace the existing code with the following:

import React, { useState } from 'react';
import Pagination from './Pagination';

const App = () => {
  const [currentPage, setCurrentPage] = useState(0);

  const handlePageChange = ({ selected }) => {
    setCurrentPage(selected);
  };

  return (
    <div className="container mx-auto">
      <h1 className="text-4xl font-bold text-center my-4">React Pagination Example</h1>
      <Pagination pageCount={10} onPageChange={handlePageChange} />
      <p className="text-center mt-4">Current Page: {currentPage + 1}</p>
    </div>
  );
};

export default App;

Step 5: Styling the Pagination component
To style the pagination component using Tailwind CSS, add the following styles to the styles.css file:

.pagination {
  ul {
    display: flex;
    justify-content: center;
    list-style-type: none;
    padding: 0;
  }

  li {
    margin: 0 4px;
    cursor: pointer;
    font-weight: 600;
  }

  a {
    padding: 8px 12px;
    background-color: #4299e1;
    color: #fff;
    border-radius: 4px;
  }

  .active a {
    background-color: #2b6cb0;
  }
}

Step 6: Running the project
Finally, run the project using the following command:

npm start

You should now see a paginated list of pages with a selected active page highlighted in Tailwind CSS styling. Feel free to customize the styles and functionality of the pagination component to suit your needs.