Livewire pagination button didn't show up

I use laravel livewire to produce the datatable However the pagination button didn't work

I tried 2 pagination method :

1. pagination() --> didn't show anything
2. simplePagnation() --> show the button but it weirdly showed up like so :

I already make sure these things :

1. Only one element on my livewire component
2. I Already import the WithPagination trait
3. Compliing the assets (using vite js)

Stack used :

1. Laravel 11
2. Livewire 3
3. Tailwindcss 3 (with flowbite)

My Livewire Class :

<?php

namespace App\Livewire\Users;

use App\Models\User;
use Livewire\Component;
use Livewire\WithPagination;

class Index extends Component
{
    use WithPagination;
    
    public function render()
    {
        return view('livewire.users.index', [
            'users' => User::with(['sections','role'])->simplePaginate(2)
        ]);
    }
}

the view :

<div class="relative sm:rounded-lg">
    <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
            ...
        </thead>
        <tbody>
            @foreach ($users as $user)                
            ...
            @endforeach
        </tbody>
    </table>

    <div class="d-flex justify-content-between align-items-center my-4">
        <div>
            <label for="perPage">Tampilkan</label>
            <select name="perPage" id="perPage" class="form-control" wire:model.live="perPage">
                @foreach ($perPageOptions as $page)
                    <option value="{{ $page }}">{{ $page }}</option>
                @endforeach
            </select>
        </div>
        <div>
            {{ $users->links() }}
        </div>
    </div>
</div>

livewire config :

return [
    'pagination_theme' => 'tailwind',
];

tailwind config :

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue",
        "./node_modules/flowbite/**/*.js",
    ],
    darkMode: "class",
    theme: {
        extend: {
            colors: {
                primary: {
                    50: "#eff6ff",
                    100: "#dbeafe",
                    200: "#bfdbfe",
                    300: "#93c5fd",
                    400: "#60a5fa",
                    500: "#3b82f6",
                    600: "#2563eb",
                    700: "#1d4ed8",
                    800: "#1e40af",
                    900: "#1e3a8a",
                    950: "#172554",
                },
            },
        },
        fontFamily: {
            body: [
                "Inter",
                "ui-sans-serif",
                "system-ui",
                "-apple-system",
                "system-ui",
                "Segoe UI",
                "Roboto",
                "Helvetica Neue",
                "Arial",
                "Noto Sans",
                "sans-serif",
                "Apple Color Emoji",
                "Segoe UI Emoji",
                "Segoe UI Symbol",
                "Noto Color Emoji",
            ],
            sans: [
                "Inter",
                "ui-sans-serif",
                "system-ui",
                "-apple-system",
                "system-ui",
                "Segoe UI",
                "Roboto",
                "Helvetica Neue",
                "Arial",
                "Noto Sans",
                "sans-serif",
                "Apple Color Emoji",
                "Segoe UI Emoji",
                "Segoe UI Symbol",
                "Noto Color Emoji",
            ],
        },
    },
    plugins: [require("flowbite/plugin")],
};

How to solve this ?

You're missing the pagination views in your tailwind's content config. You should add it to prevent the relevant CSS classes from being purged.

It should look like this:

content: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue',
    './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
],

See Laravel's documentation on pagination for more info: https://laravel.com/docs/11.x/pagination#tailwind-jit