Tailwind laravel pagination doesn't work properly

user_14321684 0
Viewed 916

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. Website

tailwind-css laravel
4 Answers
user_180320810

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() }}

user_148071110

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

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

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.

user_51082420
Related