The pagination in my project displays as shown below:

And renders the following HTML:

<nav role="navigation" aria-label="Pagination Navigation" >
    <div >
        <span
            >
            &laquo; Précédent
        </span>

        <a href="http://127.0.0.1:8000/clients?page=2"
            >
            Suivant &raquo;
        </a>
    </div>

    <div >
        <div>
            <p >
                Showing
                <span >1</span>
                to
                <span >10</span>
                of
                <span >11</span>
                results
            </p>
        </div>

        <div>
            <span >

                <span aria-disabled="true" aria-label="&amp;laquo; Précédent">
                    <span
                        
                        aria-hidden="true">
                        <svg  fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd"
                                d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
                                clip-rule="evenodd" />
                        </svg>
                    </span>
                </span>

                <span aria-current="page">
                    <span
                        >1</span>
                </span>
                <a href="http://127.0.0.1:8000/clients?page=2"
                    
                    aria-label="Go to page 2">
                    2
                </a>

                <a href="http://127.0.0.1:8000/clients?page=2" rel="next"
                    
                    aria-label="Suivant &amp;raquo;">
                    <svg  fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd"
                            d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                            clip-rule="evenodd" />
                    </svg>
                </a>
            </span>
        </div>
    </div>
</nav>

Which in an

Last time I seen the pagination in my project is a month ago, after that I:

Upgraded from Laravel 8 to Laravel 9.
Upgraded from Tailwind 2.6^ to Tailwind 3^.
Upgraded Mix
Deleted some of the components that comes by default with Breeze scafolding .

Edit

When I export the pagination views to resources\views using:

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

Then run:

npm run dev

The pagination is fixed!

But When I delete resources\views\vendor\pagination and rerun npm run dev, The pagination is broken again!

This makes me think that Mix is missing the CSS classes used in the pagination element. which wasn't the case before I upgrade.

So how can I fix this? (exporting feels like a patch and not a solution).

CodePudding user response：

By going back to the guide

Because I blindly followed the "Laravel with Tailwind 3 docs/posts" without noticing that they did not consider the Pagination.