laravel laravel-blade tailwind-css laravel-mix laravel-pagination

Laravel pagination style is broken

The pagination in my project displays as shown below:

And renders the following HTML:

<nav role="navigation" aria-label="Pagination Navigation" class="flex items-center justify-between">
    <div class="flex justify-between flex-1 sm:hidden">
        <span
            class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
            &laquo; Précédent
        </span>

        <a href="http://127.0.0.1:8000/clients?page=2"
            class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
            Suivant &raquo;
        </a>
    </div>

    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
        <div>
            <p class="text-sm text-gray-700 leading-5">
                Showing
                <span class="font-medium">1</span>
                to
                <span class="font-medium">10</span>
                of
                <span class="font-medium">11</span>
                results
            </p>
        </div>

        <div>
            <span class="relative z-0 inline-flex shadow-sm rounded-md">

                <span aria-disabled="true" aria-label="&amp;laquo; Précédent">
                    <span
                        class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-l-md leading-5"
                        aria-hidden="true">
                        <svg class="w-5 h-5" 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
                        class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5">1</span>
                </span>
                <a href="http://127.0.0.1:8000/clients?page=2"
                    class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
                    aria-label="Go to page 2">
                    2
                </a>

                <a href="http://127.0.0.1:8000/clients?page=2" rel="next"
                    class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150"
                    aria-label="Suivant &amp;raquo;">
                    <svg class="w-5 h-5" 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 isolated environment from my project results in:

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

Solution

By going back to the guide Upgrading your Tailwind CSS projects from v2 to v3 I noticed:

If you weren’t already using the purge option in your project, it’s crucial that you configure your template paths now or your compiled CSS will be empty.

I fixed the issue by referencing "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php" in tailwind.config.js and running npm run dev

const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
    content: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue",
        "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
    ],
// ...
}

Checking my upgrade commit

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