Skip to content
Permalink
main
Switch branches/tags
Go to file
 
 
Cannot retrieve contributors at this time
title description navigation github prev next
Tailwind CSS Pagination - Material Tailwind
Customise your web projects with our easy-to-use Pagination component for Tailwind CSS using Material Design guidelines.
pagination
color-variation
pagination-gradient
pagination
navbar
popover

Tailwind CSS Pagination

Get started on your web projects with our Tailwind CSS pagination which is a compact elements that represent an input, attribute, or action. This element appears dynamically as a group of multiple interactive elements and allows users to enter information, make selections, filter content, or trigger actions.

See below our simple pagination component example that you can use for your Tailwind CSS project.


<nav>
  <ul class="pagination-pink pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span class="material-icons">keyboard_arrow_left</span>
      </a>
    </li>
    <li class="page-item active">
      <a class="page-link" href="#">1</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">2</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span class="material-icons">keyboard_arrow_right</span>
      </a>
    </li>
  </ul>
</nav>

{" "}



Pagination Colors Variation

Use this example to create a simple and versatile pagination component.

Change the color of the pagination component by simply add the name of the color (from the list below) after the .pagination class.


<nav>
  <ul className="pagination pagination-cyan">
    <li className="page-item">
      <a className="page-link" href="#" aria-label="Previous">
        <span className="material-icons">keyboard_arrow_left</span>
      </a>
    </li>
    <li className="page-item active">
      <a className="page-link" href="#">1</a>
    </li>
    <li className="page-item"><a className="page-link" href="#">2</a></li>
    <li className="page-item"><a className="page-link" href="#">3</a></li>
    <li className="page-item">
      <a className="page-link" href="#" aria-label="Next">
        <span className="material-icons">keyboard_arrow_right</span>
      </a>
    </li>
  </ul>
</nav>
colors: {
  ("blue-gray");
  ("gray");
  ("brown");
  ("deep-orange");
  ("orange");
  ("amber");
  ("yellow");
  ("lime");
  ("light-green");
  ("green");
  ("teal");
  ("cyan");
  ("light-blue");
  ("blue");
  ("indigo");
  ("deep-purple");
  ("purple");
  ("pink");
  ("red");
  ("secondary");
  ("light");
  ("dark");
}

{" "}



Pagination with gradient

All you have to do is to set the .pagination-gradient class.


<nav>
  <ul class="pagination-pink pagination pagination-gradient">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span class="material-icons">keyboard_arrow_left</span>
      </a>
    </li>
    <li class="page-item active"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span class="material-icons">keyboard_arrow_right</span>
      </a>
    </li>
  </ul>
</nav>