Tailwind CSS template for Laravel pagination

tailwindcss.blade.php

@if ($paginator->hasPages())
    <div class="flex items-center">
        {{-- Previous Page Link --}}
        @if ($paginator->onFirstPage())
            <span class="rounded-l rounded-sm border border-brand-light px-3 py-2 cursor-not-allowed no-underline">&laquo;</span>
        @else
            <a
                class="rounded-l rounded-sm border-t border-b border-l border-brand-light px-3 py-2 text-brand-dark hover:bg-brand-light no-underline"
                href="{{ $paginator->previousPageUrl() }}"
                rel="prev"
            >
                &laquo;
            </a>
        @endif

        {{-- Pagination Elements --}}
        @foreach ($elements as $element)
            {{-- "Three Dots" Separator --}}
            @if (is_string($element))
                <span class="border-t border-b border-l border-brand-light px-3 py-2 cursor-not-allowed no-underline">{{ $element }}</span>
            @endif

            {{-- Array Of Links --}}
            @if (is_array($element))
                @foreach ($element as $page => $url)
                    @if ($page == $paginator->currentPage())
                        <span class="border-t border-b border-l border-brand-light px-3 py-2 bg-brand-light no-underline">{{ $page }}</span>
                    @else
                        <a class="border-t border-b border-l border-brand-light px-3 py-2 hover:bg-brand-light text-brand-dark no-underline" href="{{ $url }}">{{ $page }}</a>
                    @endif
                @endforeach
            @endif
        @endforeach

        {{-- Next Page Link --}}
        @if ($paginator->hasMorePages())
            <a class="rounded-r rounded-sm border border-brand-light px-3 py-2 hover:bg-brand-light text-brand-dark no-underline" href="{{ $paginator->nextPageUrl() }}" rel="next">&raquo;</a>
        @else
            <span class="rounded-r rounded-sm border border-brand-light px-3 py-2 hover:bg-brand-light text-brand-dark no-underline cursor-not-allowed">&raquo;</span>
        @endif
    </div>
@endif

Hi there 👋

I created a TailwindCSS plugin that adds the necessary components for Laravel paginations. 📖
https://github.com/lorisleiva/tailwindcss-plugins/tree/master/pagination

All you need to do is register it:

plugins: [
    require('tailwindcss-plugins/pagination')({ /* Customizations here */ }),
],

And it will style the default pagination template from Laravel.

{{ $items->links() }}

I hope this helps someone. 🍀

@lorisleiva nice plugin. thanks

@lorismatic it's not working when using purgeCss

I got an error...

@tisuchi

This seems to be a problem with your setup, not tailwindcss-plugins. As the NPM output suggests, you should

sudo chown- R 501:20 /Users/tisuchi/.npm

and then try again.

@lorismatic it's not working when using purgeCss

Create a "dummy" blade template with the raw html produced before turning purgeCSS on. It will then pickup all the classes it needs to include. You never need to use the blade template, just leave it there.

`{{-- This is not to be used; Only for tricking PurgeCSS --}}

« Previous

    <a href="http://localhost:8000/employees?page=2"
        class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
        Next »
    </a>
</div>

<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
    <div>
        <p class="text-sm text-gray-700 leading-5">
            Showing
            <span class="font-medium">1</span>
            to
            <span class="font-medium">15</span>
            of
            <span class="font-medium">110</span>
            results
        </p>
    </div>

    <div>
        <span class="relative z-0 inline-flex shadow-sm rounded-md">

            <span aria-disabled="true" aria-label="&amp;laquo; Previous">
                <span
                    class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-l-md leading-5"
                    aria-hidden="true">
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd"
                            d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
                            clip-rule="evenodd"></path>
                    </svg>
                </span>
            </span>





            <span aria-current="page">
                <span
                    class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5">1</span>
            </span>
            <a href="http://localhost:8000/employees?page=2"
                class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
                aria-label="Go to page 2">
                2
            </a>
            <a href="http://localhost:8000/employees?page=3"
                class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
                aria-label="Go to page 3">
                3
            </a>
            <a href="http://localhost:8000/employees?page=4"
                class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
                aria-label="Go to page 4">
                4
            </a>
            <a href="http://localhost:8000/employees?page=5"
                class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
                aria-label="Go to page 5">
                5
            </a>
            <a href="http://localhost:8000/employees?page=6"
                class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
                aria-label="Go to page 6">
                6
            </a>
            <a href="http://localhost:8000/employees?page=7"
                class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
                aria-label="Go to page 7">
                7
            </a>
            <a href="http://localhost:8000/employees?page=8"
                class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
                aria-label="Go to page 8">
                8
            </a>


            <a href="http://localhost:8000/employees?page=2" rel="next"
                class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150"
                aria-label="Next &amp;raquo;">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd"
                        d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                        clip-rule="evenodd"></path>
                </svg>
            </a>
        </span>
    </div>
</div>

`

@lorisleiva
that's a nice work, but am using it using laravel 8 now, am getting error of "theme is not a function" when compile. please i need a help in asap

@Abbaty, as you are using Laravel 8, did you try the default pagination based on Tailwindcss that comes with it?

@mohamedsab.il83 thanks you for you reply, I don't want to use tailwind in my project. but i ready have made my style using sass.

To any who doesn't want to use bootstrap or tailwindcss you can use this to customize Laravel pagination. this is a scss style.

.pagination{
margin: 5px;
.px-4 {padding-left: 1rem; padding-right: 1rem;}
.px-2 {padding-left: 0.5rem; padding-right: 0.5rem;}
.py-2 {padding-top: 0.5rem; padding-bottom: 0.5rem;}
.ml {margin-left: 3px;}
.ml-3 {margin-left: 0.75rem;}
.-ml-px {margin-left: -1px;}
.w-5 {width: 1.25rem}
.h-5 {height: 1.25rem}
.text-sm {font-size: 0.875rem;}
.font-medium {font-weight: 500;}
.border {border: 1px solid;}
.cursor-default {cursor: default;}
.leading-5 {line-height: 1.25rem;}
.rounded-md {border-radius: 0.375rem;}
.rounded-1-md {
border-top-left-radius: 0.375rem;
border-bottom-left-radius: 0.375rem;
}
.flex {display: flex;}
.items-center {align-items: center;}
.justify-between {justify-content: space-between;}
.flex-1 {flex: 1;}
.inline-flex {display: inline-flex;}
.items-center {justify-items: center;}
.border-gray-300 {border-color: rgba(209, 213, 219, 100);}
.text-gray-700 {color:rgba(55, 65, 81, 1);}
.text-gray-500 {color: rgba(107, 114, 128, 1)}
.z-0 {z-index: 0;}
.relative {position: relative;}
.bg-white {background: white;}
.sm:hidden {display: none;}

.shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.hover:text-gray-500 {color: #505050;}
.transition {
    transition-property:  background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
}
.easy-in-out {transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);}
.duration-150 {transition-duration: 150ms;}
.bg-white {background: white;}

} // end pagination