How to customize a Frontend pagy ?

[ItaloCobains]

I want to customize my Frontend pagy with this component https://preline.co/docs/pagination.html#alignment, my project is a rails 7 with tailwind css.

Thank you.

[benkoshy]

This will require some custom tailwind css. The tailwind styling example we have is here: https://ddnexus.github.io/pagy/docs/api/stylesheets/#pagy-tailwind-css

You will need to map pagy classes with the specific tailwind styling you want.

One way of doing this is via the demo app: https://ddnexus.github.io/pagy/playground/ you simply write the css you want, and the app should reload immediately - so you can instantly see the changes applied.

You may have make a PR for that style if you are happy with the results.

If I have not been clear or you have questions, please ask.

[carlos-ssh]

In which file you need to add this code line?
stylesheet_path = Pagy.root.join('stylesheets', 'pagy.tailwind.css')

[ddnexus]

That's just the line that gives you the path of the example file provided with the installed gem, however it's just an example.

I doubt that you would use that example as is in your own application. We serve it directly from the path in the demo app, but that's just a demo. If you decide to link it in your app, you should require its path the way whatever builder/pipeline your app requires/uses (for efficiency).

In practice, pasting and editing its content in your own CSS file is usually more convenient. That also decouples your app look from sudden changes that we may introduce in the styling in the future.