Basic
A basic Tailwind CSS Pagination example.
Arrows
A Tailwind CSS Pagination example with first and last navigation buttons.
<div class="pagination">
<button class="btn">
<i class="ki-outline ki-black-left">
</i>
</button>
<button class="btn">
1
</button>
<button class="btn">
2
</button>
<button class="btn">
3
</button>
<button class="btn">
4
</button>
<button class="btn">
5
</button>
<button class="btn">
<i class="ki-outline ki-black-right">
</i>
</button>
</div>
States
Use the
.active
class to highlight the currently selected
page and the
disabled
attribute to indicate disabled pagination buttons.
<div class="pagination">
<button class="btn" disabled="">
<i class="ki-outline ki-black-left">
</i>
</button>
<button class="btn">
1
</button>
<button class="btn">
2
</button>
<button class="btn active">
3
</button>
<button class="btn">
4
</button>
<button class="btn">
5
</button>
<button class="btn">
<i class="ki-outline ki-black-right">
</i>
</button>
</div>
More
A Tailwind CSS Pagination example featuring a "more" indicator for cases when the number of pages exceeds the visible limit.
This setup helps users understand that there are additional pages available beyond those currently displayed.
...
<div class="pagination">
<button class="btn" disabled="">
<i class="ki-outline ki-black-left">
</i>
</button>
<button class="btn active">
1
</button>
<button class="btn">
2
</button>
<button class="btn">
3
</button>
<span class="btn disabled">
...
</span>
<button class="btn">
24
</button>
<button class="btn">
25
</button>
<button class="btn">
26
</button>
<button class="btn">
<i class="ki-outline ki-black-right">
</i>
</button>
</div>
Sizes
Use the
.pagination-sm
and
.pagination-lg
classes to adjust the size of the pagination buttons, providing flexible options for different design requirements.
<div class="pagination pagination-sm">
<button class="btn" disabled="">
<i class="ki-outline ki-black-left">
</i>
</button>
<button class="btn btn-sm active">
1
</button>
<button class="btn">
2
</button>
<button class="btn">
3
</button>
<button class="btn">
4
</button>
<button class="btn">
5
</button>
<button class="btn">
<i class="ki-outline ki-black-right">
</i>
</button>
</div>
<div class="pagination">
<button class="btn" disabled="">
<i class="ki-outline ki-black-left">
</i>
</button>
<button class="btn active">
1
</button>
<button class="btn">
2
</button>
<button class="btn">
3
</button>
<button class="btn">
4
</button>
<button class="btn">
5
</button>
<button class="btn">
<i class="ki-outline ki-black-right">
</i>
</button>
</div>
<div class="pagination pagination-lg">
<button class="btn" disabled="">
<i class="ki-outline ki-black-left">
</i>
</button>
<button class="btn active">
1
</button>
<button class="btn">
2
</button>
<button class="btn">
3
</button>
<button class="btn">
4
</button>
<button class="btn">
5
</button>
<button class="btn">
<i class="ki-outline ki-black-right">
</i>
</button>
</div>
Source Code
The following source file manages the CSS styles of the Tailwind CSS Pagination component.
Upon building the assets using
Webpack Build Tools
,
the below file is compiled and added into the
dist/assets/css/styles.css
bundle,
making it available globally across all pages.
| File | Description |
|---|---|
src/core/plugins/components/pagination.js
|
The Tailwind CSS compatible plugin written in PostCSS for applying CSS styles to the Tailwind CSS Pagination component. |