© 2017-2020 Domizio DemichelisMIT License

➡ Chat Support on Gitter ➡

Tailwind Extra Styles

Tailwind allows to apply styles to any DOM element, so - if you use it - you don’t actually need a special extra to produce a different output. You can use the standard unstyled pagy helpers: i.e. the default pagy_nav and the pagy_nav_jsand pagy_nav_combo_js provided by the navs extra, and apply the styles to their classes.


See the navs extra if you use pagy_nav_js or pagy_combo_nav_js.

Copy and customize the following basic rules to apply the styles to the pagy CSS classes:

.pagy-combo-nav-js {
  @apply .inline-flex .shadow-md;
.pagy-combo-nav-js.pagination {
  @apply .border .border-gray-600 .rounded-sm;
.pagy-nav .page,
.pagy-nav-js .page,
.pagy-combo-nav-js .page,
.pagy-combo-nav-js .pagy-combo-input {
  @apply .text-gray-700 .border-r .border-gray-600 .px-3 .py-2 .text-sm .leading-tight .font-medium;
.pagy-nav .page:hover,
.pagy-nav-js .page:hover {
  @apply .text-gray-900;
.pagy-nav .disabled,
.pagy-nav-js .disabled,
.pagy-combo-nav-js .disabled {
  @apply .cursor-not-allowed;
.pagy-nav .active,
.pagy-nav-js .active {
  @apply .text-blue-500;
.pagy-nav .prev,
.pagy-nav-js .prev,
.pagy-combo-nav-js .prev {
  @apply .text-gray-900;
.pagy-nav .next,
 .pagy-nav-js .next,
 .pagy-combo-nav-js .next {
  @apply .text-gray-900 .border-r .border-transparent;