Tailwind laravel 分页无法正常工作

Question

所以，我正在使用 laravel 和 tailwind 创建一个项目。 使用 paginate() 方法后，然后在视图中使用此代码

@if ($posts->count())
                @foreach ($posts as $post)
                    <div class="mb-4">
                        <a class="font-bold" href="">{{ $post->user->name }}</a> <span
                            class="text-gray-600 text-sm">{{ $post->created_at->diffForHumans() }}</span>

                        <p class="mb-2">{{ $post->description }}</p>
                    </div>

                @endforeach
                {{ $posts->links() }} (this line to create the link to other pages is not working properly)
            @else
                <p>There are no posts</p>
            @endif 

分页设计有点奇怪。转到下一页和上一页可以正常工作。

Answer 1

我也有同样的问题。无法修复它，但找到了解决方法：

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

如此处所述： https://laravel.com/docs/8.x/pagination#customizing-the-pagination-view

输出的 resources/views/vendor/pagination/tailwind.blade.php 文件确实具有正确的 css 并且看起来不错。

Answer 2

您可以安装

npm i tailwindcss-plugins -D

然后在您的 tailwind 配置中注册插件。

plugins: [
    require('tailwindcss-plugins/pagination')({
        /* ... */
    }),
],

然后您可以在刀片中使用它：

{{ $items->links() }}

Answer 3

我也遇到了同样的问题，并且能够使用以下命令解决它：

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

Answer 4

如果您使用以下任一方式发布供应商视图，请确保：

artisan vendor:publish

并选择“laravel-pagination”标签或使用命令参数：

artisan vendor:publish --tag=laravel-pagination

生成的已发布视图文件包含在您的

tailwind.config.js

中。

例如：

/** @type {import('tailwindcss').Config} */
module.exports = {
    darkMode: 'class',
    content: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue",
        "./resources/views/vendor/pagination/*.blade.php",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

我发现如果没有这个，顺风风格就不会被应用。然而，我不确定为什么，因为

./resources/**/*.blade.php

模式应该从我读过的内容中挑选出它们。

E.G：这个答案

双星号 (

**

) 匹配多个段中的零个或多个字符。它用于匹配嵌套目录中的文件。

示例：

Tests/**/*.js

这里，选择的文件将被限制在

Tests

目录下。该 glob 将匹配诸如

Tests/HelloWorld.js

、

Tests/UI/HelloWorld.js

、

Tests/UI/Feature1/HelloWorld.js

等文件。

Answer 5

如何在 Laravel 中使用 Tailwind 并使其工作，在官方文档中有写 - 阅读！

另外！Laravel中的Tailwind默认用于分页。如果您需要更改使用的样式，例如更改为 Bootstrap，您可以通过编写以下代码轻松完成此操作：

应用程序/Providers/AppServiceProvider.php

// ...
public function boot(): void
{
    \Illuminate\Pagination\Paginator::useBootstrapFive();
}
// ...

官方文档

Answer 6

将模板更改为bootstrap：

$posts->links('pagination::bootstrap-5'); 您可以尝试任何引导程序版本 甚至是顺风：

$posts->links('pagination::tailwind');