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 '="" 'outline'}="" class="ki-{" default':="" 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 '="" 'outline'}="" class="ki-{" default':="" 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 '="" 'outline'}="" class="ki-{" default':="" 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 '="" 'outline'}="" class="ki-{" default':="" 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 '="" 'outline'}="" class="ki-{" default':="" 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 '="" 'outline'}="" class="ki-{" default':="" 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 '="" 'outline'}="" class="ki-{" default':="" 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 '="" 'outline'}="" class="ki-{" default':="" ki-black-right="">
</i>
</button>
</div>
<div class="pagination">
<button class="btn" disabled="">
<i '="" 'outline'}="" class="ki-{" default':="" 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 '="" 'outline'}="" class="ki-{" default':="" ki-black-right="">
</i>
</button>
</div>
<div class="pagination pagination-lg">
<button class="btn" disabled="">
<i '="" 'outline'}="" class="ki-{" default':="" 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 '="" 'outline'}="" class="ki-{" default':="" 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. |
