oliverdavies.uk/source/_partials/post-pager.html.twig

<div class="py-8 text-center">
    <ul class="list-reset inline-flex">
        <li>
            {% if page.pagination.page == 1 %}
                <span class="rounded-l-lg p-3 border border-gray text-gray -mr-px cursor-not-allowed">
                    Previous
                </span>
            {% else %}
                <a href="{{ page.pagination.previous_page.url }}" class="rounded-l-lg link no-underline hover:underline hover:bg-gray-200 focus:underline p-3 border border-gray -mr-px">
                    Previous
                </a>
            {% endif %}
        </li>

        {% for i in range(1, page.pagination.total_pages) %}
            <li class="{{ i > (page.pagination.page + 2) or i < (page.pagination.page - 2) ? 'hidden sm:block' }}">
                {% if i == page.pagination.page %}
                    <span class="p-3 border border-gray text-white bg-blue-600 -mr-px">
                        {{ i }}
                    </span>
                {% else %}
                    <a href="{{ i == 1 ? '/blog' : '/blog/page/' ~ i ~ '.html' }}" class="link no-underline hover:underline hover:bg-gray-200 focus:underline p-3 border border-gray -mr-px">
                        {{ i }}
                    </a>
                {% endif %}
            </li>
        {% endfor %}

        <li>
            {% if page.pagination.next_page.url %}
                <a href="{{ page.pagination.next_page.url }}" class="rounded-r-lg link no-underline hover:underline hover:bg-gray-200 focus:underline p-3 border border-gray">
                    Next
                </a>
            {% else %}
                <span class="rounded-r-lg p-3 border border-gray text-gray cursor-not-allowed">
                    Next
                </span>
            {% endif %}
        </li>
    </ul>
</div>