TailwindUI + will_paginate renderer

application_helper.rb

module ApplicationHelper
  def will_paginate(coll_or_options = nil, options = {})
    if coll_or_options.is_a? Hash
      options = coll_or_options
      coll_or_options = nil
    end
    options = options.merge renderer: TailwindUIPaginationRenderer unless options[:renderer]
    super(*[coll_or_options, options].compact)
  end
end

gap.html.erb

<span class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
  &hellip;
</span>

next.html.erb

<% if page %>
  <a href="<%= target %>" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
    <%= text %>
  </a>
<% else %>
  <span class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 bg-dark-blue near-white">
    <%= text %>
  </span>
<% end %>

page_number.html.erb

<% if page == current_page %>
  <span class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"><%= page %></span>
<% else %>
  <a href="<%= target %>" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"><%= page %></a>
<% end %>

previous.html.erb

<% if page %>
  <a href="<%= target %>" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
    <%= text %>
  </a>
<% else %>
  <span class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 bg-dark-blue near-white">
    <%= text %>
  </span>
<% end %>

tailwind.config.js

module.exports = {
  content: [
    './app/views/**/*.html.erb',
    './app/components/**/*.html.erb',
    './app/helpers/**/*.rb',
    './config/initializers/*.rb',
    './app/javascript/**/*.js'
  ]
};

tailwindui_paginator_renderer.rb

require 'will_paginate/view_helpers/link_renderer'
require 'will_paginate/view_helpers/action_view'

# https://github.com/mislav/will_paginate/blob/v3.3.1/lib/will_paginate/view_helpers/link_renderer.rb
class TailwindUIPaginationRenderer < WillPaginate::ActionView::LinkRenderer
  CLASSES = { container: 'relative z-0 inline-flex rounded-md shadow-sm -space-x-px' }.freeze

  def container_attributes
    { class: CLASSES[:container] }
  end

  def page_number(page)
    render('will_paginate/page_number',
           { locals: { page: page, current_page: current_page, classes: CLASSES,
                       target: url(page) } })
  end

  def gap
    render('will_paginate/gap')
  end

  def previous_page
    num = @collection.current_page > 1 && (@collection.current_page - 1)
    render('will_paginate/previous',
           { locals: { page: num, target: url(num), text: @options[:previous_label] } })
  end

  def next_page
    num = @collection.current_page < total_pages && (@collection.current_page + 1)
    render('will_paginate/next',
           { locals: { page: num, target: url(num), text: @options[:next_label] } })
  end

  private

  def render(template, options = {})
    # Setting layout to false bypasses Warden
    # ref: https://github.com/heartcombo/devise/issues/4271#issuecomment-704182728
    ApplicationController.render({ template: template, layout: false }.merge(options))
  end
end

Still a WIP but hopefully someone out there will find this useful 😄

I confirm, it's been useful, thanks a lot for sharing this gist!

Great job, Thanks.