Styling the paginator with Tailwind css

#1

Spent some time today, styling the paginator in Tailwind. May be useful to someone.

Wrap the pagination links in a container;

<div class="livewire-pagination">{{ $flowStatus->onEachSide(2)->links() }}</div>

Add styles to your app.css

/* purgecss start ignore */
.livewire-pagination {
     @apply inline-block w-auto ml-auto float-right;
}
ul.pagination {
    @apply flex border border-gray-200 rounded font-mono;
}
.page-link {
    @apply block bg-white text-blue-800 border-r border-gray-200 outline-none py-2 w-12 text-sm text-center;
}
.page-link:last-child {
    @apply border-0;
}
.page-link:hover {
    @apply bg-blue-700 text-white border-blue-700;
}
.page-item.active .page-link {
    @apply bg-blue-700 text-white border-blue-700;
}
.page-item.disabled .page-link {
    @apply bg-white text-gray-300 border-gray-200;
}

/* purgecss end ignore */

Be sure to wrap your css in purgecss ignore comments since the classes used by the paginator are not in any files that are scanned by purgecss and will be stripped if you don’t tell it to ignore.

2 Likes
Pagination not working as intended
#2

Thanks @Snapey The other alternative is to publish the pagination component and edit the styles.

php artisan vendor:publish --tag=laravel-pagination

At

/resources/views/vendor/pagination
#3

It does not seem to be the same paginator?

1 Like
#4

Yeah, livewire is using a custom pagination-links component.

#5

Thanks @Snapey!! Much appreciated!!