Skip to content
Branch: master
Find file History
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
README.md
index.js

README.md

πŸ“– Pagination

Customizable pagination component that integrates perfectly with Laravel.

pagination

Installation

npm i tailwindcss-plugins -D

Basic usage

plugins: [
    require('tailwindcss-plugins/pagination')(),
    // ...
],

If you use Laravel to paginate a collection of $items, all you have to do is:

{{ $items->links() }}

Advanced usage

You can customize the main pagination color by setting the color key and/or customize the CSS of all elements of the pagination component.

plugins: [
    require('tailwindcss-plugins/pagination')({
        // Costumize the color only. (optional)
        color: colors['teal-dark'],

        // Costumize styling using @apply. (optional)
        wrapper: 'flex justify-center list-reset'

        // Costumize styling using CSS-in-JS. (optional)
        wrapper: {
            'display': 'flex',
            'justify-items': 'center',
            '@apply list-reset': {},
        }
    }),

    // ...
],

Here is the exhaustive list of pagination elements that you can style.

CONFIG KEY              CSS SELECTOR
----------              ------------
wrapper:                .pagination
item:                   .pagination .page-item
itemHover:              .pagination .page-item:hover
link:                   .pagination .page-item .page-link
linkHover:              .pagination .page-item .page-link:hover
linkFirst:              .pagination .page-item:first-child .page-link
linkFirstHover:         .pagination .page-item:first-child .page-link:hover
linkSecond:             .pagination .page-item:nth-child(2) .page-link
linkSecondHover:        .pagination .page-item:nth-child(2) .page-link:hover
linkBeforeLast:         .pagination .page-item:nth-last-child(2) .page-link
linkBeforeLastHover:    .pagination .page-item:nth-last-child(2) .page-link:hover
linkLast:               .pagination .page-item:last-child .page-link
linkLastHover:          .pagination .page-item:last-child .page-link:hover
linkActive:             .pagination .page-item.active .page-link
linkActiveHover:        .pagination .page-item.active .page-link:hover
linkDisabled:           .pagination .page-item.disabled .page-link
linkDisabledHover:      .pagination .page-item.disabled .page-link:hover

Examples

pagination_1

{}

pagination_2

{
    color: colors['teal-dark'],
}

pagination_3

{
    color: colors['pink-dark'],
    wrapper: 'inline-flex list-reset shadow rounded'
}

pagination_4

{
    color: colors['purple-dark'],
    linkFirst: 'mr-6 border rounded',
    linkSecond: 'rounded-l border-l',
    linkBeforeLast: 'rounded-r border-r',
    linkLast: 'ml-6 border rounded',
}

pagination_5

{
    color: colors['orange-light'],
    link: 'bg-grey-darkest py-4 px-2 border-r border-grey-dark text-white no-underline',
    linkHover: 'bg-grey-dark',
    linkDisabled: 'bg-grey-dark',
    linkFirst: null,
    linkLast: 'border-0',
}

pagination_6

{
    link: 'bg-white px-3 py-1 border-r border-t border-b text-black no-underline',
    linkActive: 'bg-yellow-lighter border-yellow font-bold',
    linkSecond: 'rounded-l border-l',
    linkBeforeLast: 'rounded-r',
    linkFirst: {
        '@apply mr-3 pl-5 border': {},
        'border-top-left-radius': '999px',
    },
    linkLast: {
        '@apply ml-3 pr-5 border': {},
        'border-top-right-radius': '999px',
    },
}
You can’t perform that action at this time.