phplaraveltailwind-csslaravel-11tailwind-css-4

Laravel pagination not displayed or not working


I'm trying to use pagination but when I check it, it doesn't show up in the UI. I've searched and tried many solutions but still no luck. is there something missing or wrong in my code?

Blade

<div class="mt-4">
    {{ $posts->links('pagination::tailwind') }}
</div>

Controller

public function index(Request $request)
{
    $filter = [
        'title' => $request->title ?? '',
        'slug' => $request->slug ?? '',
        'category_name' => $request->category_name ?? '',
    ];

    $posts = $this->postHelper->getAll($filter, $request->page ?? 1, $request->item_per_page ?? 25, $request->sort ?? '');

    return view('admin.post.index', ['posts' => $posts['data']['data']]);
}

Helper

public function getAll(array $filter, int $page = 1, int $itemPerPage = 0, string $sort = '')
{
    try {
        $posts = $this->postModel->getAll($filter, $page, $itemPerPage, $sort);

        if (empty($posts)) {
            return [
                'status' => false,
                'data' => null,
            ];
        }

        return [
            'status' => true,
            'data' => $posts,
        ];
    } catch (\Throwable $th) {
        return [
            'status' => false,
            'error' => $th->getMessage(),
        ];
    }
}

Model

public function getAll(array $filter, int $page, int $itemPerPage, string $sort)
{
    $skip = ($page * $itemPerPage) - $itemPerPage;
    $post = $this->query();

    $total = $post->count();
    $sort = $sort ?: 'created_at DESC';
    $list = $post->orderByRaw($sort)->paginate($itemPerPage);

    return [
        'total' => $total,
        'data' => $list,
    ];
}

Solution

  • Laravel Pagination

    Actually, what you did is a bit strange, but you properly passed the result of paginate() to the view. The links() method doesn't return anything if it's not meaningful: there are too few items, and pagination isn't possible.

    If you want to change the functionality, you have the option to manually create a custom paginator. In this case, you need to manipulate the result of the hasPages() function to always return true. With this manipulation, you can override the default behavior and make the paginator believe that it always needs to be displayed because there is always a page.

    Alternatively, you have the option to implement a custom paginator appearance, allowing you to override the default if-else statements as well.

    TailwindCSS v4

    You marked your question as using v4. It's important to note that with TailwindCSS v4, automatic source detection has been implemented, so you no longer need to list every source in the content key of the tailwind.config.js. By default, CSS-first configurations are preferred over the legacy JavaScript-based configuration.

    It’s important to know that automatic source detection doesn't cover everything. It automatically excludes paths listed in .gitignore.

    Which files are scanned

    Tailwind will scan every file in your project for class names, except in the following cases:

    • Files that are in your .gitignore file
    • Binary files like images, videos, or zip files
    • CSS files
    • Common package manager lock files

    To include a package located in an extra /vendor or /node_modules folder (which are typically excluded by .gitignore), you need to register it in your CSS file using the @source directive as follows:

    The documentation still shows the v3 JavaScript-based routes, but this can easily be re-coded into the new v4 syntax by using relative path.

    ./resources/css/style.css

    @import "tailwindcss";
    
    /* relative path ti pagination views folder */
    @source "./../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views";