I am developing a simple website with Symfony7, including a feature that retrieves data from a MySQL database via Doctrine and presents the results on multiple pages. Pagerfanta provides pagination and technically it works perfectly fine as it takes the user to the desired page.
The problem is that the appearance of the navigation bar differs between the dev and prod environments, as illustrated below. My development environment runs on Ubuntu 22.04 (using the Symfony server), the EC2 that the website is hosted on runs on Ubuntu 24.04 with Apache 2.4.
How the pagination menu appears in dev: Pagination menu, desired appearance
How it appears in prod: Pagination menu, wrong appearance
The issue occurs regardless of the browser (tested in Firefox, Chrome, Edge).
When I inspect the page source, there are significant differences in Tailwind-generated CSS, even though the project/config/packages/babdev_pagerfanta.yaml file for images above is exactly the same in both environments.
babdev_pagerfanta:
default_view: twig
default_twig_template: '@BabDevPagerfanta/tailwind.html.twig'
The relevant CSS from the dev environment:
<div>
<nav class="pagination">
<span class="pagination__item pagination__item--previous-page pagination__item--disabled">Previous</span>
<span class="pagination__item pagination__item--current-page">1</span>
<a class="pagination__item" href="/atlas/by-genus?page=2">2</a>
<a class="pagination__item" href="/atlas/by-genus?page=3">3</a>
<a class="pagination__item" href="/atlas/by-genus?page=4">4</a>
<a class="pagination__item" href="/atlas/by-genus?page=5">5</a>
<span class="pagination__item pagination__item--separator">…</span>
<a class="pagination__item" href="/atlas/by-genus?page=29">29</a>
<a class="pagination__item pagination__item--next-page" href="/atlas/by-genus?page=2" rel="next">Next</a></nav>
</div>
The relevant CSS from the prod environment:
<div>
<nav role="navigation" class="flex items-center justify-between">
<div class="flex-1 flex items-center justify-between">
<div>
<span class="relative z-0 inline-flex shadow-sm">
<span aria-disabled="true">
<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 rounded-l-md leading-5">Previous</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="/atlas/by-genus?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:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">2</a>
<a href="/atlas/by-genus?page=3" 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:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">3</a>
<a href="/atlas/by-genus?page=4" 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:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">4</a>
<a href="/atlas/by-genus?page=5" 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:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">5</a>
<span aria-disabled="true">
<span 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 cursor-default leading-5">…</span>
</span>
<a href="/atlas/by-genus?page=26" 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:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">26</a>
<a href="/atlas/by-genus?page=2" rel="next" 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 rounded-r-md leading-5 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">Next</a>
</span>
</div>
</div>
</nav>
</div>
I tried clearing the cache, updating composer and bundles, and changing the views and template names in babdev_pagerfanta.yaml, but achieved nothing.
Obviously, I would like the prod version to look the same as the dev version. I would very much appreciate any suggestions on how I can control the CSS? Could the issue be caused by Pagerfanta or Tailwind - or still something else?
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: [
'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', 'text-gray-700', 'bg-white',
'border', 'border-gray-300', 'cursor-default',
'rounded-l-md', 'rounded-r-md', '-ml-px',
'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'
],
};
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 :).