Splitting content across pages sounds simple until you actually build it. These Tailwind pagination examples give you ready-to-use code for every common pattern.
Basic numbered links. Previous and next buttons. Active states, disabled states, responsive breakpoints. Icons and ellipsis for large datasets.
Each example uses pure Tailwind CSS utility classes. No custom stylesheets. Copy the markup, adjust the colors, and you’re done.
You’ll also find React and Vue.js integration patterns for dynamic pagination with state management.
Whether you’re paginating a data table, blog archive, or search results, these components cover it.
What is Tailwind Pagination
Tailwind pagination is a page navigation component built entirely with utility classes from the Tailwind CSS framework.
No custom stylesheets required. You combine flex, spacing, border, and color utilities to create numbered page links, previous/next buttons, and active state indicators.
The approach differs from traditional CSS pagination methods where you write dedicated component styles.
Here, every visual property comes from predefined classes. Border radius, hover effects, disabled states. All handled inline.
Developers working with React, Vue.js, or Next.js often prefer this method because it keeps styling decisions visible right in the markup.
Tailwind pagination examples
Tailwind Pagination – A Guide to Navigation
Mamba UI – A Different Take on Pagination
Round Buttons with Tailwind
Simple and Stylish with Tailwind CSS
Next and Prev – More Than Just Buttons
VueJs and Tailwind – A Perfect Match
Accessible Tailwind CSS Pagination – A Developer’s Perspective
Hover Effect – A Touch of Magic
Preline’s Take on Tailwind CSS Pagination
Only Numbers – A Classic Approach
Tailwind CSS and the Art of Pagination
Buttons, Buttons Everywhere
Circles and Offsets
Flowing Through Pages
Responsive and Dark Mode Friendly
Hop Between Pages with TUK
Krishna’s Contribution: Buttons
Lexicon’s Simple Approach
React with Tailwind CSS
Elegant Card Style Navigation
Bordered Pagination: A Tailwind Masterpiece
How Does Tailwind Pagination Work
Tailwind pagination works by stacking utility classes on HTML elements to control layout, spacing, colors, and interactive states.
A typical pagination component uses a wrapper div with flex and gap classes. Inside, anchor tags or buttons receive individual styling for backgrounds, borders, and text.
The framework handles responsive design through breakpoint prefixes like sm:, md:, and lg:.
Want larger buttons on desktop? Add md:px-6 alongside your base px-4 class.
State variants cover the rest. Hover effects use hover: prefix, focus rings use focus:, and disabled buttons get disabled: modifiers.
The whole system compiles down to optimized CSS through PostCSS, keeping your production bundle lean.
What Are the Core CSS Classes for Tailwind Pagination
Three class categories form the foundation of any Tailwind pagination component: display/flex utilities, spacing utilities, and border/rounded utilities.
What Flex and Display Classes Create Pagination Layouts
The flex class paired with items-center creates horizontal button alignment. Add justify-center for centered pagination or justify-between when you need previous/next buttons at opposite ends.
inline-flex works better for pagination links that need to sit alongside other inline elements.
What Spacing Classes Control Pagination Button Gaps
Use gap-1 through gap-4 between pagination buttons. The gap utility eliminates the need for margin classes on individual items.
For internal button padding, px-3 py-2 or px-4 py-2 hit the sweet spot for clickable targets.
What Border and Rounded Classes Style Pagination Buttons
border adds a 1px solid border; border-gray-300 sets the color. For rounded corners, choose from rounded, rounded-md, rounded-lg, or rounded-full for pill-shaped buttons.
Combine border-0 with background colors for flat button styles.
What is a Basic Tailwind Pagination Example
This starter example shows a simple numbered pagination with five page links.
<nav class="flex items-center gap-1">
<a href="#" class="px-3 py-2 border border-gray-300 rounded hover:bg-gray-100">1</a>
<a href="#" class="px-3 py-2 border border-gray-300 rounded hover:bg-gray-100">2</a>
<a href="#" class="px-3 py-2 border border-gray-300 rounded hover:bg-gray-100">3</a>
<a href="#" class="px-3 py-2 border border-gray-300 rounded hover:bg-gray-100">4</a>
<a href="#" class="px-3 py-2 border border-gray-300 rounded hover:bg-gray-100">5</a>
</nav>
The nav element wraps everything for web accessibility. Screen readers identify this as a navigation region.
flex items-center gap-1 on the container creates the horizontal layout with consistent spacing.
Each link gets padding, a light border, subtle rounded corners, and a hover state. Clean and functional.
What is a Tailwind Pagination Example with Previous and Next Buttons
Most real-world pagination needs previous and next controls alongside the numbered links.
<nav class="flex items-center gap-2">
<a href="#" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-100">
Previous
</a>
<a href="#" class="px-3 py-2 border border-gray-300 rounded-lg hover:bg-gray-100">1</a>
<a href="#" class="px-3 py-2 bg-blue-500 text-white rounded-lg">2</a>
<a href="#" class="px-3 py-2 border border-gray-300 rounded-lg hover:bg-gray-100">3</a>
<a href="#" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-100">
Next
</a>
</nav>
Previous and next buttons use wider padding (px-4) to accommodate the text.
The active page (page 2 here) drops the border and uses bg-blue-500 text-white for clear visual distinction.
This pattern works well for data table pagination, blog archives, and search results. The user interface stays consistent whether users click numbers or navigation arrows.
Swap the text labels for SVG arrow icons when you need a more compact design.
What is a Rounded Tailwind Pagination Example
Rounded pagination uses pill-shaped buttons for a softer, modern look.
<nav class="flex items-center gap-2">
<a href="#" class="px-4 py-2 bg-gray-200 rounded-full hover:bg-gray-300">Prev</a>
<a href="#" class="px-4 py-2 bg-gray-200 rounded-full hover:bg-gray-300">1</a>
<a href="#" class="px-4 py-2 bg-blue-500 text-white rounded-full">2</a>
<a href="#" class="px-4 py-2 bg-gray-200 rounded-full hover:bg-gray-300">3</a>
<a href="#" class="px-4 py-2 bg-gray-200 rounded-full hover:bg-gray-300">Next</a>
</nav>
The rounded-full class creates complete pill shapes. Works best with equal or near-equal horizontal and vertical padding.
Background colors replace borders here, giving a flatter appearance that fits minimalist design aesthetics.
What is a Tailwind Pagination Example with Icons
Icons from Heroicons or similar libraries replace text labels for a cleaner, more compact pagination component.
<nav class="flex items-center gap-1">
<a href="#" class="p-2 border border-gray-300 rounded hover:bg-gray-100">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
</svg>
</a>
<a href="#" class="px-3 py-2 border border-gray-300 rounded hover:bg-gray-100">1</a>
<a href="#" class="px-3 py-2 bg-blue-500 text-white rounded">2</a>
<a href="#" class="px-3 py-2 border border-gray-300 rounded hover:bg-gray-100">3</a>
<a href="#" class="p-2 border border-gray-300 rounded hover:bg-gray-100">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
</svg>
</a>
</nav>
Icon buttons use equal padding (p-2) instead of separate horizontal and vertical values. The w-5 h-5 classes size the SVG at 20px.
Inline SVGs keep your pagination self-contained. No external icon font dependencies.
What is a Tailwind Pagination Example with Active State
Active state styling tells users which page they’re viewing. Multiple visual cues work together: background color, text color, and sometimes a subtle shadow.
<nav class="flex items-center gap-2">
<a href="#" class="px-4 py-2 border border-gray-300 rounded-lg
hover:bg-gray-100 hover:border-gray-400
focus:outline-none focus:ring-2 focus:ring-blue-500">
Previous
</a>
<a href="#" class="px-3 py-2 border border-gray-300 rounded-lg
hover:bg-gray-100 focus:ring-2 focus:ring-blue-500">1</a>
<a href="#" class="px-3 py-2 bg-blue-500 text-white rounded-lg
shadow-md focus:ring-2 focus:ring-blue-300">2</a>
<a href="#" class="px-3 py-2 border border-gray-300 rounded-lg
hover:bg-gray-100 focus:ring-2 focus:ring-blue-500">3</a>
<a href="#" class="px-4 py-2 border border-gray-300 rounded-lg
hover:bg-gray-100 hover:border-gray-400
focus:outline-none focus:ring-2 focus:ring-blue-500">
Next
</a>
</nav>
The active page uses bg-blue-500 text-white shadow-md to stand out from inactive links.
Focus rings (focus:ring-2) improve keyboard navigation and meet ARIA accessibility standards. Users tabbing through the pagination see clear visual feedback.
What is a Responsive Tailwind Pagination Example
Responsive pagination adapts button sizes and spacing across different viewport widths using breakpoint prefixes.
<nav class="flex items-center gap-1 sm:gap-2">
<a href="#" class="px-2 py-1 sm:px-4 sm:py-2 text-sm sm:text-base
border border-gray-300 rounded hover:bg-gray-100">
Prev
</a>
<a href="#" class="px-2 py-1 sm:px-3 sm:py-2 text-sm sm:text-base
border border-gray-300 rounded hover:bg-gray-100">1</a>
<a href="#" class="px-2 py-1 sm:px-3 sm:py-2 text-sm sm:text-base
bg-blue-500 text-white rounded">2</a>
<a href="#" class="px-2 py-1 sm:px-3 sm:py-2 text-sm sm:text-base
border border-gray-300 rounded hover:bg-gray-100">3</a>
<a href="#" class="px-2 py-1 sm:px-4 sm:py-2 text-sm sm:text-base
border border-gray-300 rounded hover:bg-gray-100">
Next
</a>
</nav>
Mobile devices get compact buttons: px-2 py-1 text-sm. Screens 640px and wider switch to sm:px-4 sm:py-2 sm:text-base.
This mobile-first design approach keeps touch targets usable on phones while maximizing space on larger displays.
What is a Tailwind Pagination Example with Disabled States
Disabled states prevent interaction on first/last pages and provide visual feedback that a button is inactive.
<nav class="flex items-center gap-2">
<button disabled class="px-4 py-2 border border-gray-200 rounded-lg
bg-gray-50 text-gray-400 cursor-not-allowed">
Previous
</button>
<a href="#" class="px-3 py-2 bg-blue-500 text-white rounded-lg">1</a>
<a href="#" class="px-3 py-2 border border-gray-300 rounded-lg
hover:bg-gray-100">2</a>
<a href="#" class="px-3 py-2 border border-gray-300 rounded-lg
hover:bg-gray-100">3</a>
<button class="px-4 py-2 border border-gray-300 rounded-lg
hover:bg-gray-100">
Next
</button>
</nav>
The disabled Previous button uses bg-gray-50 text-gray-400 cursor-not-allowed. Lighter colors and the not-allowed cursor signal non-interactivity.
Switch from anchor tags to button elements when you need the native disabled attribute. Screen readers announce the disabled state automatically.
What is a Compact Tailwind Pagination Example
Compact pagination fits tight spaces: mobile navbars, sidebars, embedded widgets.
<nav class="inline-flex rounded-lg border border-gray-300 overflow-hidden">
<a href="#" class="px-2 py-1 text-sm hover:bg-gray-100 border-r border-gray-300">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
</svg>
</a>
<span class="px-3 py-1 text-sm bg-gray-50">3 / 10</span>
<a href="#" class="px-2 py-1 text-sm hover:bg-gray-100 border-l border-gray-300">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
</svg>
</a>
</nav>
This design shows current page and total (3 / 10) instead of individual page numbers. Minimal footprint, maximum clarity.
inline-flex with overflow-hidden creates a connected button group. Internal borders separate the sections cleanly.
What is a Tailwind Pagination Example with Page Numbers and Ellipsis
Large datasets need truncated page ranges. Ellipsis indicators show hidden pages between visible numbers.
<nav class="flex items-center gap-1">
<a href="#" class="px-3 py-2 border border-gray-300 rounded hover:bg-gray-100">1</a>
<span class="px-2 py-2 text-gray-500">...</span>
<a href="#" class="px-3 py-2 border border-gray-300 rounded hover:bg-gray-100">4</a>
<a href="#" class="px-3 py-2 bg-blue-500 text-white rounded">5</a>
<a href="#" class="px-3 py-2 border border-gray-300 rounded hover:bg-gray-100">6</a>
<span class="px-2 py-2 text-gray-500">...</span>
<a href="#" class="px-3 py-2 border border-gray-300 rounded hover:bg-gray-100">20</a>
</nav>
The ellipsis uses a span element, not a link. Gray text (text-gray-500) differentiates it from clickable numbers.
Standard pattern: show first page, ellipsis, pages around current, ellipsis, last page. Works for any total page count.
How to Integrate Tailwind Pagination with JavaScript Frameworks
Tailwind classes work identically across frontend frameworks. The difference is how you handle state and click events.
How to Use Tailwind Pagination in React
React components use useState for current page tracking and className for Tailwind classes. Conditional class application handles active states.
function Pagination({ totalPages, currentPage, onPageChange }) {
return (
<nav className="flex items-center gap-2">
<button
onClick={() => onPageChange(currentPage - 1)}
disabled={currentPage === 1}
className="px-4 py-2 border rounded-lg disabled:opacity-50
disabled:cursor-not-allowed hover:bg-gray-100"
>
Previous
</button>
{[...Array(totalPages)].map((_, i) => (
<button
key={i + 1}
onClick={() => onPageChange(i + 1)}
className={`px-3 py-2 rounded-lg ${
currentPage === i + 1
? 'bg-blue-500 text-white'
: 'border border-gray-300 hover:bg-gray-100'
}`}
>
{i + 1}
</button>
))}
<button
onClick={() => onPageChange(currentPage + 1)}
disabled={currentPage === totalPages}
className="px-4 py-2 border rounded-lg disabled:opacity-50
disabled:cursor-not-allowed hover:bg-gray-100"
>
Next
</button>
</nav>
);
}
The disabled: variants handle button states when on first or last page. Template literals toggle classes based on currentPage value.
Check the guide on how to use Tailwind CSS in React for project setup details.
How to Use Tailwind Pagination in Vue
Vue uses :class binding for dynamic styles and @click for event handling. The reactive data system tracks pagination state.
<template>
<nav class="flex items-center gap-2">
<button
@click="changePage(currentPage - 1)"
:disabled="currentPage === 1"
class="px-4 py-2 border rounded-lg disabled:opacity-50
disabled:cursor-not-allowed hover:bg-gray-100"
>
Previous
</button>
<button
v-for="page in totalPages"
:key="page"
@click="changePage(page)"
:class="[
'px-3 py-2 rounded-lg',
currentPage === page
? 'bg-blue-500 text-white'
: 'border border-gray-300 hover:bg-gray-100'
]"
>
{{ page }}
</button>
<button
@click="changePage(currentPage + 1)"
:disabled="currentPage === totalPages"
class="px-4 py-2 border rounded-lg disabled:opacity-50
disabled:cursor-not-allowed hover:bg-gray-100"
>
Next
</button>
</nav>
</template>
Vue.js array syntax in :class combines static and conditional classes. The v-for directive generates page buttons dynamically.
What Are Common Tailwind Pagination Mistakes
Developers new to Tailwind pagination often hit the same issues. Avoid these:
- Missing focus states – Always add
focus:ringorfocus:outlineclasses for keyboard usability - Touch targets too small – Minimum 44x44px for mobile; use adequate padding
- No disabled styling – First/last page buttons need visual disabled states
- Forgetting ARIA labels – Add
aria-label="Pagination"to the nav element - Hardcoded colors – Use Tailwind’s color palette classes, not inline hex values
- Overcomplicating responsive – Start mobile-first, add breakpoint classes only where needed
Test your pagination with keyboard-only navigation. Tab through every element, activate buttons with Enter/Space.
Compare your implementation against Tailwind button patterns to keep styling consistent across your user experience.
FAQ on Tailwind Pagination Examples
What classes create a basic Tailwind pagination layout?
Use flex and items-center on the container, gap-2 for spacing between buttons. Each pagination link needs px-3 py-2 for padding, border and rounded for styling, plus hover:bg-gray-100 for interaction feedback.
How do I style the active page in Tailwind pagination?
Apply background and text color classes to the current page button. Common pattern: bg-blue-500 text-white replaces the border styling. Add shadow-md for extra visual weight that separates active from inactive states.
How do I make Tailwind pagination responsive?
Use breakpoint prefixes like sm:, md:, and lg: before utility classes. Start with mobile sizes (px-2 py-1 text-sm), then add larger values at breakpoints (sm:px-4 sm:py-2 sm:text-base) for bigger screens.
How do I add disabled states to pagination buttons?
Use button elements with the native disabled attribute. Style with disabled:opacity-50, disabled:cursor-not-allowed, and disabled:bg-gray-50. These classes activate automatically when the button is disabled on first or last pages.
Can I use icons instead of text in Tailwind pagination?
Yes. Replace Previous/Next text with inline SVG arrows from Heroicons or similar libraries. Use p-2 for equal padding on icon buttons and w-5 h-5 classes to size the SVG elements consistently.
How do I add ellipsis for large page counts?
Insert span elements with ... text between page number links. Style ellipsis with text-gray-500 px-2 to differentiate from clickable elements. Show first page, ellipsis, pages around current, ellipsis, last page.
What is the best gap spacing for pagination buttons?
gap-1 or gap-2 works for most designs. Tighter spacing (gap-1) suits compact layouts and mobile views. Wider spacing (gap-2 or gap-3) improves touch targets and gives a more spacious appearance on desktop.
How do I implement Tailwind pagination in React?
Use useState for current page tracking. Map over page numbers to generate buttons dynamically. Apply conditional className with template literals to toggle active styles based on state. Handle clicks with onClick handlers.
Should I use anchor tags or buttons for pagination?
Use anchor tags for server-side pagination where each page has a unique URL. Use button elements for client-side pagination with JavaScript state management. Buttons support the native disabled attribute; anchors do not.
How do I make Tailwind pagination accessible?
Wrap pagination in a nav element with aria-label="Pagination". Add focus:ring-2 classes for keyboard visibility. Use aria-current="page" on the active link. Test with keyboard navigation and screen readers for accessible forms compliance.
Conclusion
These Tailwind pagination examples cover the patterns you’ll actually use in production. Basic layouts, icon buttons, ellipsis for large datasets, and framework integrations.
The utility-first approach keeps your page navigation component flexible. Change colors, spacing, or border radius without touching a stylesheet.
Focus states and keyboard navigation support matter. Build pagination that works for everyone, not just mouse users.
Copy these code snippets into your Next.js or Nuxt.js project. Adjust the color palette classes to match your design system.
Test across Chrome DevTools device modes. Check cross-browser compatibility in Firefox and Safari.
Pagination seems small. But clean, accessible page controls improve how users move through your content. Get it right once, reuse it everywhere.
