Livewire

Spent some time today, styling the Livewire 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.