In this episode, we tackle styling the pagination links for our posts listing. At first, we simply dump the Laravel pagination links onto the page using $posts->links()
, but quickly realize they aren't styled the way we want.
Digging a little deeper, we discover that because the pagination view is rendered inside the Laravel framework (rather than our own Blade files), Tailwind CSS doesn't pick up those classes by default. To fix this, we update our tailwind.config.js
to include the pagination views path within the framework, forcing Tailwind to scan and generate the correct styles for pagination.
After revamping our configuration, we restart our build process with npm run dev
and, when we reload, the pagination finally looks just right. We repeat the process for our tag detail pages, ensuring pagination there is also working and styled consistently.
Finally, we handle a little bug where pagination URLs for tag pages weren't being built properly. We solve this by customizing the paginator's path in the app service provider, making sure everything works seamlessly. Now, both the index and tag pages have perfectly styled and functioning pagination. Nice job!