Tailwind CSS Pagination Components

These pagination components provide clean, responsive navigation for multi-page content. Built with Tailwind CSS utility classes, they're fully customizable and ready to implement.

Each component uses Tailwind's utility-first approach, making it easy to modify colors, spacing, and animations to match your project's design system.

1. Standard Numbered Pagination

<!-- Standard Numbered Pagination -->
<nav aria-label="Page navigation">
  <ul class="flex items-center justify-center space-x-1">
    <li>
      <a href="#" class="px-3 py-1 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-md">
        <span class="sr-only">Previous</span>
        &laquo;
      </a>
    </li>
    <li><a href="#" class="px-3 py-1 text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded-md">1</a></li>
    <li><a href="#" class="px-3 py-1 text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded-md">2</a></li>
    <li><a href="#" class="px-3 py-1 bg-blue-500 text-white rounded-md" aria-current="page">3</a></li>
    <li><a href="#" class="px-3 py-1 text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded-md">4</a></li>
    <li><a href="#" class="px-3 py-1 text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded-md">5</a></li>
    <li>
      <a href="#" class="px-3 py-1 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-md">
        <span class="sr-only">Next</span>
        &raquo;
      </a>
    </li>
  </ul>
</nav>

2. Previous / Next Buttons

<!-- Previous / Next Buttons -->
<div class="flex justify-center space-x-4">
  <!-- Example: Previous button disabled on first page -->
  <button class="flex items-center px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
    Previous
  </button>
  <button class="flex items-center px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
    Next
    <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
  </button>
</div>

3. First / Last Buttons

<!-- First / Last Buttons -->
<nav aria-label="Page navigation">
  <ul class="flex items-center justify-center space-x-1">
    <!-- Example: First/Prev disabled on first page -->
    <li><button class="px-3 py-1 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-md disabled:opacity-50 disabled:cursor-not-allowed" disabled>First</button></li>
    <li><button class="px-3 py-1 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-md disabled:opacity-50 disabled:cursor-not-allowed" disabled>&laquo; Prev</button></li>

    <!-- Show current page info -->
    <li><span class="px-3 py-1 text-gray-700">Page 3 of 10</span></li>

    <!-- Example: Next/Last enabled -->
    <li><button class="px-3 py-1 text-blue-500 hover:text-blue-600 hover:bg-blue-50 rounded-md">Next &raquo;</button></li>
    <li><button class="px-3 py-1 text-blue-500 hover:text-blue-600 hover:bg-blue-50 rounded-md">Last</button></li>
  </ul>
</nav>

4. Ellipsis Pagination

<!-- Ellipsis Pagination -->
<nav aria-label="Page navigation">
  <ul class="flex items-center justify-center space-x-1">
    <li><a href="#" class="px-3 py-1 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-md">&laquo;</a></li>
    <li><a href="#" class="px-3 py-1 text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded-md">1</a></li>
    <li><span class="px-3 py-1 text-gray-500">…</span></li>
    <li><a href="#" class="px-3 py-1 text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded-md">4</a></li>
    <li><a href="#" class="px-3 py-1 bg-blue-500 text-white rounded-md" aria-current="page">5</a></li>
    <li><a href="#" class="px-3 py-1 text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded-md">6</a></li>
    <li><span class="px-3 py-1 text-gray-500">…</span></li>
    <li><a href="#" class="px-3 py-1 text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded-md">10</a></li>
    <li><a href="#" class="px-3 py-1 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-md">&raquo;</a></li>
  </ul>
</nav>

5. Compact Pagination

<!-- Compact Pagination -->
<nav aria-label="Page navigation">
  <ul class="flex items-center justify-center -space-x-px"> <!-- Negative margin joins borders -->
    <li>
      <a href="#" class="px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700">Previous</a>
    </li>
    <li>
      <a href="#" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700">1</a>
    </li>
    <li>
      <!-- Active Page -->
      <a href="#" aria-current="page" class="px-3 py-2 leading-tight text-blue-600 bg-blue-50 border border-blue-300 hover:bg-blue-100 hover:text-blue-700">2</a>
    </li>
    <li>
      <a href="#" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700">3</a>
    </li>
    <li>
      <a href="#" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700">Next</a>
    </li>
  </ul>
</nav>

8. Jump to Page Input

Note: Requires JavaScript to handle form submission or input change.

of 50 
<!-- Jump to Page Input -->
<form class="flex justify-center items-center space-x-2" action="#" method="GET"> <!-- Adjust action/method as needed -->
    <label for="jump-page" class="text-gray-600 text-sm">Go to page:</label>
    <input
      type="number"
      id="jump-page"
      name="page" <!-- Use 'page' or your pagination parameter -->
      min="1"
      max="50" <!-- Set max to total pages -->
      value="1" <!-- Optionally set current page -->
      class="w-16 px-2 py-1 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
      aria-label="Jump to page number"
     >
    <span class="text-gray-500 text-sm">of 50</span> <!-- Display total pages -->
    <button type="submit" class="px-3 py-1 bg-gray-200 text-gray-700 text-sm rounded-md hover:bg-gray-300">Go</button>
</form>

9. Dropdown Pagination Selector

Note: Requires JavaScript to handle selection change and navigate.

of 10 
<!-- Dropdown Pagination Selector -->
<div class="flex justify-center items-center space-x-2">
    <label for="page-select" class="text-sm text-gray-600">Page:</label>
    <select
      id="page-select"
      name="page" <!-- Use 'page' or your pagination parameter -->
      class="block w-auto pl-3 pr-8 py-1 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 text-sm"
      aria-label="Select page number"
      onchange="window.location.href='?page=' + this.value;" <!-- Basic JS example, adapt as needed -->
    >
        <!-- Generate options dynamically with JS/backend -->
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3" selected>3</option> <!-- Mark current page as selected -->
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
    </select>
    <span class="text-sm text-gray-500">of 10</span> <!-- Display total pages -->
</div>

10. Slider Pagination (HTML Structure)

Note: Requires JavaScript to update page display/navigation based on slider value.

Page 5 of 20 
<!-- Slider Pagination (HTML Structure) -->
<div class="flex justify-center items-center space-x-4 px-4">
    <span class="text-sm text-gray-600">Page <span class="font-medium" id="slider-page-value">5</span> of 20</span> <!-- JS updates #slider-page-value -->
    <input
      type="range"
      id="page-slider"
      name="page"
      min="1"
      max="20" <!-- Set max to total pages -->
      value="5" <!-- Set initial/current page -->
      class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-500" <!-- Use 'accent-*' for slider color -->
      aria-label="Select page with slider"
      oninput="document.getElementById('slider-page-value').textContent = this.value;" <!-- Basic JS to update display -->
      <!-- Add JS 'onchange' or 'oninput' listener to trigger page navigation -->
     >
</div>

11. Keyboard Navigation (Styling Focus)

Note: Actual navigation requires JavaScript listening for key presses (e.g., ArrowLeft, ArrowRight). This example shows styled focus states for accessibility.

(Try tabbing through the links)

<!-- Keyboard Navigation (Focus Styling) -->
<!-- Add focus styles (e.g., focus:ring-2, focus:outline-none) to interactive elements -->
<nav aria-label="Page navigation">
  <ul class="flex items-center justify-center space-x-1">
    <li>
      <a href="#" class="px-3 py-1 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1">
        <span class="sr-only">Previous</span>
        &laquo;
      </a>
    </li>
    <li><a href="#" class="px-3 py-1 text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1">1</a></li>
    <li>
      <!-- Note: Adjust focus ring offset color for active element background -->
      <a href="#" class="px-3 py-1 bg-blue-500 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-offset-white focus:ring-offset-1 focus:ring-blue-300" aria-current="page">2</a>
    </li>
    <li><a href="#" class="px-3 py-1 text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1">3</a></li>
    <li>
      <a href="#" class="px-3 py-1 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1">
        <span class="sr-only">Next</span>
        &raquo;
      </a>
    </li>
  </ul>
</nav>

12. Section-Based Pagination (Chapters/Categories)

<!-- Section-Based Pagination (Chapters/Categories) -->
<nav aria-label="Chapter navigation">
  <ul class="flex flex-wrap justify-center gap-2"> <!-- Use flex-wrap and gap for responsiveness -->
    <li>
      <a href="#intro" class="px-4 py-2 border border-gray-300 rounded-md text-sm text-gray-700 hover:bg-gray-100">Introduction</a>
    </li>
    <li>
      <!-- Active/Current Section -->
      <a href="#setup" class="px-4 py-2 border border-blue-500 bg-blue-50 rounded-md text-sm text-blue-700 font-medium" aria-current="page">Setup</a>
    </li>
    <li>
      <a href="#usage" class="px-4 py-2 border border-gray-300 rounded-md text-sm text-gray-700 hover:bg-gray-100">Usage Guide</a>
    </li>
    <li>
      <a href="#api" class="px-4 py-2 border border-gray-300 rounded-md text-sm text-gray-700 hover:bg-gray-100">API Reference</a>
    </li>
    <li>
      <a href="#conclusion" class="px-4 py-2 border border-gray-300 rounded-md text-sm text-gray-700 hover:bg-gray-100">Conclusion</a>
    </li>
  </ul>
</nav>

13. Date-Based Pagination (Blog Archives)

<!-- Date-Based Pagination (Blog Archives) -->
<nav aria-label="Archive navigation">
   <ul class="flex flex-wrap justify-center gap-x-4 gap-y-2 text-sm">
      <li><a href="/archives/2024/01" class="text-gray-600 hover:text-blue-600">Jan 2024</a></li>
      <li><a href="/archives/2023/12" class="text-gray-600 hover:text-blue-600">Dec 2023</a></li>
      <li>
        <!-- Current Archive Page -->
        <a href="/archives/2023/11" class="text-blue-600 font-semibold underline" aria-current="page">Nov 2023</a>
      </li>
      <li><a href="/archives/2023/10" class="text-gray-600 hover:text-blue-600">Oct 2023</a></li>
      <li><a href="/archives/2023/09" class="text-gray-600 hover:text-blue-600">Sep 2023</a></li>
      <li><span class="text-gray-400">...</span></li>
      <li><a href="/archives/2022" class="text-gray-600 hover:text-blue-600">Older Posts</a></li>
   </ul>
 </nav>

14. Alphabetical Pagination (A–Z)

<!-- Alphabetical Pagination (A–Z) -->
<nav aria-label="Alphabetical index navigation">
  <ul class="flex flex-wrap justify-center gap-x-2 gap-y-1 text-sm font-medium">
    <li><a href="?letter=A" class="block px-2 py-1 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded">A</a></li>
    <li><a href="?letter=B" class="block px-2 py-1 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded">B</a></li>
    <li>
      <!-- Active Letter -->
      <a href="?letter=C" class="block px-2 py-1 bg-blue-500 text-white rounded" aria-current="page">C</a>
    </li>
    <li><a href="?letter=D" class="block px-2 py-1 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded">D</a></li>
    <li>
      <!-- Example: Disabled letter (no results) -->
      <span class="px-2 py-1 text-gray-400 cursor-not-allowed">E</span>
    </li>
    <li><a href="?letter=F" class="block px-2 py-1 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded">F</a></li>
    <!-- ... Add rest of the letters ... -->
    <li><a href="?letter=Z" class="block px-2 py-1 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded">Z</a></li>
    <li><a href="?letter=#" class="block px-2 py-1 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded">#</a></li> <!-- For numbers/symbols -->
  </ul>
</nav>

16. Circle Buttons Pagination

<!-- Circle Buttons Pagination -->
<nav aria-label="Page navigation">
  <ul class="flex items-center justify-center space-x-2">
    <li>
      <a href="#" class="flex items-center justify-center w-8 h-8 rounded-full text-gray-500 hover:bg-gray-100">
        <span class="sr-only">Previous</span>
         &laquo;
      </a>
    </li>
    <li><a href="#" class="flex items-center justify-center w-8 h-8 rounded-full text-gray-700 hover:bg-gray-100">1</a></li>
    <li><a href="#" class="flex items-center justify-center w-8 h-8 rounded-full text-gray-700 hover:bg-gray-100">2</a></li>
    <li>
      <!-- Active Page -->
      <a href="#" class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-500 text-white" aria-current="page">3</a>
    </li>
    <li><a href="#" class="flex items-center justify-center w-8 h-8 rounded-full text-gray-700 hover:bg-gray-100">4</a></li>
    <li><span class="flex items-center justify-center w-8 h-8 text-gray-500">...</span></li>
    <li><a href="#" class="flex items-center justify-center w-8 h-8 rounded-full text-gray-700 hover:bg-gray-100">10</a></li>
     <li>
      <a href="#" class="flex items-center justify-center w-8 h-8 rounded-full text-gray-500 hover:bg-gray-100">
        <span class="sr-only">Next</span>
         &raquo;
      </a>
    </li>
  </ul>
</nav>

17. Underline/Tab Pagination

<!-- Underline/Tab Pagination -->
<nav aria-label="Page navigation" class="border-b border-gray-200"> <!-- Optional: border for visual separation -->
  <ul class="flex items-center justify-center -mb-px space-x-4"> <!-- Negative margin pulls border up -->
    <li>
      <a href="#" class="inline-block py-3 px-1 border-b-2 border-transparent text-gray-500 hover:text-blue-600 hover:border-blue-500">
         &laquo; <span class="hidden sm:inline">Prev</span> <!-- Responsive label -->
      </a>
    </li>
    <li><a href="#" class="inline-block py-3 px-2 border-b-2 border-transparent text-gray-500 hover:text-blue-600 hover:border-blue-500">1</a></li>
    <li>
      <!-- Active Page -->
      <a href="#" class="inline-block py-3 px-2 border-b-2 border-blue-500 text-blue-600 font-semibold" aria-current="page">2</a>
    </li>
    <li><a href="#" class="inline-block py-3 px-2 border-b-2 border-transparent text-gray-500 hover:text-blue-600 hover:border-blue-500">3</a></li>
     <li><span class="inline-block py-3 px-1 text-gray-400">...</span></li>
     <li><a href="#" class="inline-block py-3 px-2 border-b-2 border-transparent text-gray-500 hover:text-blue-600 hover:border-blue-500">8</a></li>
    <li>
      <a href="#" class="inline-block py-3 px-1 border-b-2 border-transparent text-gray-500 hover:text-blue-600 hover:border-blue-500">
         <span class="hidden sm:inline">Next</span> &raquo;
      </a>
    </li>
  </ul>
</nav>

18. Card-Style Pagination

<!-- Card-Style Pagination -->
<nav aria-label="Page navigation">
  <ul class="flex flex-wrap justify-center gap-2"> <!-- Use flex-wrap and gap -->
    <li>
      <a href="#" class="block px-3 py-2 bg-white border border-gray-200 rounded-md shadow-sm hover:bg-gray-50 text-gray-600">
        &laquo; Previous
      </a>
    </li>
     <li><a href="#" class="block px-3 py-2 bg-white border border-gray-200 rounded-md shadow-sm hover:bg-gray-50 text-gray-600">1</a></li>
     <li>
       <!-- Active Page -->
       <a href="#" aria-current="page" class="block px-3 py-2 bg-blue-500 border border-blue-500 rounded-md shadow-sm text-white">2</a>
     </li>
     <li><a href="#" class="block px-3 py-2 bg-white border border-gray-200 rounded-md shadow-sm hover:bg-gray-50 text-gray-600">3</a></li>
     <li><span class="block px-3 py-2 text-gray-400">...</span></li>
     <li><a href="#" class="block px-3 py-2 bg-white border border-gray-200 rounded-md shadow-sm hover:bg-gray-50 text-gray-600">10</a></li>
    <li>
      <a href="#" class="block px-3 py-2 bg-white border border-gray-200 rounded-md shadow-sm hover:bg-gray-50 text-gray-600">
        Next &raquo;
      </a>
    </li>
  </ul>
</nav>

21. Condensed Pagination for Mobile

Note: Uses responsive prefixes (`sm:`, `md:`) to change appearance on different screen sizes.

<!-- Condensed Pagination for Mobile -->
<nav aria-label="Page navigation">
  <ul class="flex items-center justify-center space-x-1">
    <li>
      <a href="#" class="px-3 py-1 text-gray-500 hover:bg-gray-100 rounded-md">
        &laquo;
        <!-- Show "Prev" text only on sm screens and up -->
        <span class="sr-only sm:not-sr-only"> Prev</span>
      </a>
    </li>

    <!-- Hide extra numbers on small screens (default), show on sm and up -->
    <li class="hidden sm:block"><a href="#" class="px-3 py-1 text-gray-700 hover:bg-gray-100 rounded-md">1</a></li>
    <li class="hidden sm:block"><span class="px-2 py-1 text-gray-400">...</span></li>

    <!-- Always show current page -->
    <li><a href="#" class="px-3 py-1 bg-blue-500 text-white rounded-md" aria-current="page">5</a></li>

    <!-- Hide extra numbers on small screens, show on sm and up -->
    <li class="hidden sm:block"><span class="px-2 py-1 text-gray-400">...</span></li>
    <li class="hidden sm:block"><a href="#" class="px-3 py-1 text-gray-700 hover:bg-gray-100 rounded-md">10</a></li>

    <li>
      <a href="#" class="px-3 py-1 text-gray-500 hover:bg-gray-100 rounded-md">
        <!-- Show "Next" text only on sm screens and up -->
         <span class="sr-only sm:not-sr-only">Next </span>
         &raquo;
      </a>
    </li>
  </ul>
</nav>

22. Horizontal Scroll Pagination (Swipeable)

Note: Uses `overflow-x-auto` and `whitespace-nowrap` on the container. Touch devices can swipe.

(Scroll the pagination bar horizontally if needed)

<!-- Horizontal Scroll Pagination (Swipeable) -->
<nav aria-label="Page navigation">
   <!-- Container allows horizontal scrolling and prevents line wrapping -->
   <div class="overflow-x-auto whitespace-nowrap py-2 scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100">
      <!-- `scrollbar-*` classes require the 'tailwind-scrollbar' plugin -->
      <!-- Use inline-flex on the list to make it stay in one line -->
      <ul class="inline-flex items-center space-x-1 px-2">
        <li><a href="#" class="px-3 py-1 text-gray-500 hover:bg-gray-100 rounded-md">&laquo;</a></li>
        <li><a href="#" class="px-3 py-1 text-gray-700 hover:bg-gray-100 rounded-md">1</a></li>
        <li><a href="#" class="px-3 py-1 text-gray-700 hover:bg-gray-100 rounded-md">2</a></li>
        <li><a href="#" class="px-3 py-1 bg-blue-500 text-white rounded-md" aria-current="page">3</a></li>
        <li><a href="#" class="px-3 py-1 text-gray-700 hover:bg-gray-100 rounded-md">4</a></li>
        <li><a href="#" class="px-3 py-1 text-gray-700 hover:bg-gray-100 rounded-md">5</a></li>
        <li><a href="#" class="px-3 py-1 text-gray-700 hover:bg-gray-100 rounded-md">6</a></li>
        <li><a href="#" class="px-3 py-1 text-gray-700 hover:bg-gray-100 rounded-md">7</a></li>
        <li><a href="#" class="px-3 py-1 text-gray-700 hover:bg-gray-100 rounded-md">8</a></li>
        <li><a href="#" class="px-3 py-1 text-gray-700 hover:bg-gray-100 rounded-md">9</a></li>
        <li><a href="#" class="px-3 py-1 text-gray-700 hover:bg-gray-100 rounded-md">10</a></li>
        <li><a href="#" class="px-3 py-1 text-gray-700 hover:bg-gray-100 rounded-md">11</a></li>
        <li><a href="#" class="px-3 py-1 text-gray-700 hover:bg-gray-100 rounded-md">12</a></li>
        <li><a href="#" class="px-3 py-1 text-gray-500 hover:bg-gray-100 rounded-md">&raquo;</a></li>
      </ul>
   </div>
 </nav>

26. Step-Based Pagination (Multi-step Forms)

Note: Visual indicator for progress through steps. JS manages step transitions.

<!-- Step-Based Pagination (Multi-step Forms) -->
<nav aria-label="Form steps">
  <ol class="flex items-center w-full max-w-md mx-auto">

    <!-- Step 1: Completed -->
    <li class="flex w-full items-center text-blue-600 after:content-[''] after:w-full after:h-1 after:border-b after:border-blue-600 after:border-1 after:inline-block">
      <!-- Make the circle a link if users can go back -->
      <a href="#" class="flex items-center justify-center w-10 h-10 bg-blue-600 rounded-full lg:h-12 lg:w-12 shrink-0">
        <svg class="w-4 h-4 text-white lg:w-6 lg:h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
         <span class="sr-only">Step 1: Personal Info (Completed)</span>
      </a>
    </li>

    <!-- Step 2: Active -->
    <!-- Note: `after:border-gray-300` indicates the line to the next step is not completed yet -->
    <li class="flex w-full items-center text-blue-600 after:content-[''] after:w-full after:h-1 after:border-b after:border-gray-300 after:border-1 after:inline-block">
      <span class="flex items-center justify-center w-10 h-10 bg-blue-100 rounded-full lg:h-12 lg:w-12 shrink-0 ring-4 ring-blue-200"> <!-- Highlight active step -->
         <span class="font-bold text-blue-600">2</span>
         <span class="sr-only">Step 2: Account Details (Current)</span>
      </span>
    </li>

    <!-- Step 3: Future -->
    <li class="flex items-center">
      <span class="flex items-center justify-center w-10 h-10 bg-gray-100 rounded-full lg:h-12 lg:w-12 text-gray-500 shrink-0">
         3
         <span class="sr-only">Step 3: Review</span>
      </span>
    </li>
  </ol>

  <!-- Optional Navigation Buttons -->
   <div class="text-center mt-6 flex justify-between max-w-md mx-auto">
       <button type="button" class="px-4 py-2 text-sm text-gray-600 bg-gray-200 rounded-md hover:bg-gray-300 disabled:opacity-50" disabled>Previous Step</button> <!-- Example: Disabled on first step -->
       <button type="button" class="px-4 py-2 text-sm text-white bg-blue-500 rounded-md hover:bg-blue-600">Next Step</button>
   </div>
</nav>

FAQ on Tailwind CSS Pagination

How do I implement basic Tailwind CSS pagination?

To create basic pagination with Tailwind CSS, use flex layout with gap spacing. Combine button classes for page indicators and apply active states with different background colors. The utility-first approach makes it simple to build responsive pagination components without writing custom CSS.

<nav class="flex items-center justify-between">
  <div class="flex gap-x-1">
    <a href="#" class="px-3 py-2 rounded-md bg-gray-200 hover:bg-gray-300">Previous</a>
    <a href="#" class="px-3 py-2 rounded-md bg-blue-500 text-white">1</a>
    <a href="#" class="px-3 py-2 rounded-md bg-gray-200 hover:bg-gray-300">2</a>
    <a href="#" class="px-3 py-2 rounded-md bg-gray-200 hover:bg-gray-300">Next</a>
  </div>
</nav>

Can I create custom styles for Tailwind pagination?

Absolutely! Tailwind's utility classes provide endless customization options for pagination UI. Modify colors, rounded corners, spacing, and hover effects by changing class names. No need for custom CSS—just use Tailwind's variants like hover:, focus:, and active: to create styled pagination that matches your design system.

How do I make Tailwind CSS pagination responsive?

Responsive pagination is straightforward with Tailwind's breakpoint prefixes. Use hidden sm:flex for secondary elements that should only appear on larger screens. Apply different paddings with px-2 md:px-4 to adjust spacing across devices. This creates a mobile-first pagination design that adapts to various screen sizes.

Is it possible to integrate Tailwind pagination with JavaScript frameworks?

Yes! Tailwind pagination works seamlessly with React, Vue, and Angular. Create reusable pagination components with framework-specific features while using Tailwind for styling. Many developers combine Tailwind UI components with frontend libraries for dynamic, interactive pagination that updates based on data changes.

How do I add icons to Tailwind CSS pagination?

Incorporate icons into your Tailwind pagination by using SVG icons or icon libraries compatible with Tailwind CSS. Position icons with flex layout utilities and add appropriate spacing:

<a href="#" class="flex items-center gap-x-1 px-4 py-2 rounded-md bg-gray-200">
  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><!-- icon path --></svg>
  <span>Previous</span>
</a>

How can I improve accessibility in Tailwind pagination?

Focus on accessibility by adding proper ARIA attributes to your pagination elements. Include aria-current="page" for the active page and aria-disabled="true" for disabled controls. Maintain adequate color contrast and ensure focus states are visible. These practices make your pagination component usable for everyone.

What's the best way to handle large numbers of pages in Tailwind pagination?

For extensive page lists, implement ellipsis indicators. Show first, last, current, and adjacent pages while using ellipsis for others. This pagination pattern maintains usability while keeping the UI clean:

<div class="flex gap-x-1">
  <a href="#">1</a>
  <span>...</span>
  <a href="#">4</a>
  <a href="#" class="active">5</a>
  <a href="#">6</a>
  <span>...</span>
  <a href="#">10</a>
</div>

Can Tailwind CSS pagination be used with server-side pagination?

Definitely. Tailwind CSS pagination styling works perfectly with server-side pagination techniques. Use form actions or AJAX requests to fetch paginated data, then update the UI accordingly. Many developers combine Tailwind's utility classes with backend frameworks for complete pagination solutions that handle large datasets efficiently.

Are there ready-made Tailwind pagination components available?

Yes! Explore Tailwind UI, Headless UI, and community-created component libraries that offer pre-built pagination examples. These resources provide professionally designed pagination templates that follow best practices. Adam Wathan's TailwindUI offers premium components, while GitHub repositories contain free alternatives for various use cases.

How do I apply custom animations to Tailwind pagination?

Add subtle animations to pagination elements using Tailwind's transition utilities. Apply transition-all duration-200 for smooth state changes. Combine with transform properties for hover effects that enhance user experience. Custom pagination animations improve feedback when users interact with page navigation controls.