Scott Watermasysk Husband, Father, Bootstrapper, Developer, Builder, Shipper.

Jekyll Paging With Tailwind CSS

Published:

I updated this blog Jekyll 4.0 and decided it was time to add paging to my Shorts category.

Enabling per category paging required adding and configuring the Jekyll Paginate V2 gem.

After that was in place and configured, it was time to add the "← Older" and "Newer →" buttons. I thought it was going to have to write a bunch of if statements and extra CSS to get working correctly for the first and last page. It turns out Flexbox + tailwindcss make it super easy:


{% if paginator.total_pages > 1 %}
<pager class="flex">
{% if paginator.next_page %}
<a class="flex-auto text-left" href="{{ paginator.next_page_path }}">← Older Shorts</a>
{% endif %}
{% if paginator.previous_page %}
<a class="flex-auto text-right" href="{{ paginator.previous_page_path }}">Newer Shorts →</a>
{% endif %}
</pager>
{% endif %}
  1. Setup a container with the class flex
  2. Set both paging links to flex-auto. This allows the item(s) to grow and take up all of the available space
  3. Add the class text-right to the newer/next link. This pulls the text to the far right.

For good measure, I added a text-left on the previous link, but this should be the default and not necessary.