Tailwind laravel pagination doesn't work properly

Question

So, I'm creating a project using laravel and tailwind. After using the paginate() method and then this code in the view

@if ($posts->count())
                @foreach ($posts as $post)
                    <div class="mb-4">
                        <a class="font-bold" href="">{{ $post->user->name }}</a> <span
                            class="text-gray-600 text-sm">{{ $post->created_at->diffForHumans() }}</span>

                        <p class="mb-2">{{ $post->description }}</p>
                    </div>

                @endforeach
                {{ $posts->links() }} (this line to create the link to other pages is not working properly)
            @else
                <p>There are no posts</p>
            @endif

The pagination design was a little bizarre. Going to the next and previous page is working correctly.

Using {{ $posts->links('pagination::semantic-ui') }} things get better, but i don't have the arrows while using it. — Thiago Melo, Dec 29 '21 at 20:56
So it's the design that's screwed up, pagination itself works? Did you inspect the pagination elements? Do they have Tailwind classes applied? — brombeer, Dec 29 '21 at 20:56
i've tried npm run dev and npm run watch and both didn't change anything — Thiago Melo, Dec 29 '21 at 20:57
in your enviroment you have the entire tailwind css file included or a purged version of it? — Maik Lowrey, Dec 29 '21 at 21:04

score 5 · Answer 1 · answered Jan 25 '22 at 21:07

I had the same problem. Wasn't able to fix it but found a workaround by using:

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

As described here: https://laravel.com/docs/8.x/pagination#customizing-the-pagination-view

The outputted resources/views/vendor/pagination/tailwind.blade.php file did have the correct css and looked good.

Maik Lowrey · Answer 2 · 2021-12-29T21:06:37.650

1

You can install npm i tailwindcss-plugins -D

Then register the plugin in your tailwind configuration.

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

And then you can use this in your blade:

{{ $items->links() }}

edited Dec 29 '21 at 21:06

answered Dec 29 '21 at 20:56

Maik Lowrey

15,957
6
40
79

score 0 · Answer 3 · edited Feb 28 '22 at 21:05

0

I also had the same problem and was able to solve it by using this command:

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

edited Feb 28 '22 at 21:05

ouflak

2,458
10
44
49

answered Feb 28 '22 at 16:46

Suleman

23
1
7

score 0 · Answer 4 · answered Aug 13 '22 at 16:59

Make sure that if you publish the vendor view with either:

artisan vendor:publish

and selecting the 'laravel-pagination' tag or using the command argument:

artisan vendor:publish --tag=laravel-pagination

That the resulting published view files are included in your tailwind.config.js.

For example:

/** @type {import('tailwindcss').Config} */
module.exports = {
    darkMode: 'class',
    content: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue",
        "./resources/views/vendor/pagination/*.blade.php",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

I found that without this, the tailwind styles weren't applied. However, I am not sure why since the ./resources/**/*.blade.php pattern should have picked them up from what I have read.

E.G: this answer

Double Asterisk (**) matches zero or more characters across multiple segments. It is used for globbing files that are in nested directories.

Example: Tests/**/*.js

Here, the file selecting will be restricted to the Tests directory. The glob will match the files such as Tests/HelloWorld.js, Tests/UI/HelloWorld.js, Tests/UI/Feature1/HelloWorld.js.

score 0 · Answer 5 · answered Mar 13 '23 at 18:42

How to use tailwind with laravel and make it work is written in the official documentation - read!

Additionally! Tailwind in Laravel is used for pagination by default. If you need to change the styles used, for example, to Bootstrap, you can easily do this by writing in next code:

app/Providers/AppServiceProvider.php

// ...
public function boot(): void
{
    \Illuminate\Pagination\Paginator::useBootstrapFive();
}
// ...

official documentation

Tailwind laravel pagination doesn't work properly

5 Answers5