Reports

There's a few things going on here that could influence the rendering. First off, Tailwind may not be purging classes in dev - like it does in prod. My assumption is that the classes you're seeing in prod are not taken into account by Tailwind (at least not all of them) when rendering.

Could you, just for the sake of diagnosing, add a static div to the page including all those Pagerfanta-rendered classes?:

<div class="flex items-center justify-between flex-1 z-0 inline-flex shadow-sm relative px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-l-md leading-5 -ml-px text-gray-700 hover:text-gray-500 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"></div>

If your Pagerfanta is now properly rendering on prod, we know what the issue is. Tailwind simply doesn't "know" about (some of) these classes and thus does not include them in it's compiled CSS.

To fix this you could add the following to your tailwind.config.js to whitelist those classes used by Pagerfanta:

module.exports = {
// Your other contents under module.exports

  safelist: [
    'pagination__item',
    'pagination__item--previous-page',
    'pagination__item--current-page',
    'pagination__item--disabled',
    'relative', 'inline-flex', 'items-center', 'px-4', 'py-2',
    'text-sm', 'font-medium', 'text-gray-500', 'bg-white', 'border', 'border-gray-300',
    'cursor-default', 'rounded-l-md', 'rounded-r-md'
  ],
};

If this does not fix your issue, could you try switching to Pagerfanta's default styling and see how that renders?

babdev_pagerfanta:
    default_view: twig
    default_twig_template: '@BabDevPagerfanta/default.html.twig'

This will help diagnose a bit further.

Please let me know what the results are so I can update my answer :).

79375706