Laravel 分页样式被破坏

Question

我项目中的分页显示如下：

并呈现以下 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>

我项目的 isolated environment 结果是：

我上次在我的项目中看到分页是在一个月前，之后我：

已从 Laravel 8 升级到 Laravel 9.
已从 Tailwind 2.6^ 升级到 Tailwind 3^.
升级版混合版
删除了 Breeze 脚手架 默认附带的一些组件。

编辑

当我将分页视图导出到 resources\views 时使用：

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

然后运行:

npm run dev

分页固定！

但是当我删除resources\views\vendor\pagination和重新运行npm run dev时，分页又坏了！

这让我觉得 Mix 缺少分页元素中使用的 CSS 类。在我升级之前情况并非如此。

那我该如何解决呢？（导出感觉像是补丁而不是解决方案）。

Answer 1

回到指南 Upgrading your Tailwind CSS projects from v2 to v3 我注意到：

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.

我通过引用 tailwind.config.js 和运行 npm run dev

中的 "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php" 解决了这个问题

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",
    ],
// ...
}

正在检查我的升级提交

因为我盲目地遵循了“Laravel with Tailwind 3 docs/posts”而没有注意到他们没有考虑 Pagination.

Laravel 分页样式被破坏

Laravel pagination style is broken

laravel

laravel-pagination

laravel-blade

laravel-mix

tailwind-css

编辑

正在检查我的升级提交