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,
    ];
}

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,
    ];
}

• php
• laravel
• tailwind-css
• laravel-11
• tailwind-css-4

Share Improve this question Follow edited Mar 8 at 9:31 rozsazoltan 11.3k66 gold badges2121 silver badges5959 bronze badges asked Mar 8 at 5:30 ZebraZebra 4544 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

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.

• Laravel Playground with 21 records and pagination by 5 records
• Laravel Playground with 1 record and pagination by 5 records

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.

• Manually Creating a Paginator - Laravel 11.x Docs
• Paginator / LengthAwarePaginator Instance Methods - Laravel 11.x Docs

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

• Customizing the Pagination View - Laravel 11.x Docs

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.

• Automatic Source Detection from TailwindCSS v4 - StackOverflow

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

• Setting your base path: @import "tailwindcss" source("../src"); - TailwindCSS v4 Docs
• Disable automatic detection: @import "tailwindcss" source(none); - TailwindCSS v4 Docs

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:

• @source directive - TailwindCSS v4 Docs
• Tailwind JIT: necessary content for Pagination - Laravel 12.x Docs

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";

In Your Controller Change Like this

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

In Your Model Modify the getAll Method

return $post->orderByRaw($sort)->paginate($itemPerPage);

return paginate result directly 

Laravel links() method requires Paginator object but your passing an array.