Tailwind laravel分页无法正常工作

i7uq4tfw  于 2023-01-03  发布在  其他
关注(0)|答案(4)|浏览(122)

因此,我使用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

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

tcbh2hod

tcbh2hod1#

我遇到了同样的问题。无法修复它,但找到了一个变通方案,使用:

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

As described here: https://laravel.com/docs/8.x/pagination#customizing-the-pagination-view
输出的resources/views/vendor/pagination/tailwind.blade.php文件确实有正确的css,看起来不错。

2nbm6dog

2nbm6dog2#

您可以安装npm i tailwindcss-plugins -D
然后在您的tailwind配置中注册插件。

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

然后你可以在你的刀片式服务器中使用这个:
{{ $items->links() }}

bvjxkvbb

bvjxkvbb3#

我也遇到了同样的问题,并能够通过使用以下命令解决它:

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

cuxqih214#

请确保在发布供应商视图时使用以下任一选项:
第一个月
并选择"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: [],
}

我发现如果没有这个,tailwind样式就不会被应用,但是,我不知道为什么./resources/**/*.blade.php模式应该从我所读到的内容中选择它们。
例如:this answer
双星号(**)匹配多个段中的零个或多个字符。它用于全局绑定嵌套目录中的文件。
示例:Tests/**/*.js
这里,文件选择将被限制在Tests目录下,glob将匹配Tests/HelloWorld.jsTests/UI/HelloWorld.jsTests/UI/Feature1/HelloWorld.js等文件。

相关问题