From 614a3e1bec73f1876e12b28b85305e2a82be4c12 Mon Sep 17 00:00:00 2001
From: Domizio Demichelis <dd.nexus@gmail.com>
Date: Sun, 28 Jun 2020 16:31:24 +0700
Subject: [PATCH 1/5] fix for extra "-js" in "pagy-combo-nav-js"

---
 lib/pagy/extras/navs.rb       | 2 +-
 test/pagy/extras/navs_test.rb | 6 +++---
 test/pagy/extras/trim_test.rb | 6 +++---
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/lib/pagy/extras/navs.rb b/lib/pagy/extras/navs.rb
index f1e5fd819..b6b9c85aa 100644
--- a/lib/pagy/extras/navs.rb
+++ b/lib/pagy/extras/navs.rb
@@ -24,7 +24,7 @@ def pagy_nav_js(pagy, id=pagy_id)
     def pagy_combo_nav_js(pagy, id=pagy_id)
       link, p_prev, p_next, p_page, p_pages = pagy_link_proc(pagy), pagy.prev, pagy.next, pagy.page, pagy.pages
 
-      html = EMPTY + %(<nav id="#{id}" class="pagy-combo-nav-js-js pagination" role="navigation" aria-label="pager">)
+      html = EMPTY + %(<nav id="#{id}" class="pagy-combo-nav-js pagination" role="navigation" aria-label="pager">)
       html << (p_prev ? %(<span class="page prev">#{link.call p_prev, pagy_t('pagy.nav.prev'), 'aria-label="previous"'}</span> )
                       : %(<span class="page prev disabled">#{pagy_t('pagy.nav.prev')}</span> ))
       input = %(<input type="number" min="1" max="#{p_pages}" value="#{p_page}" style="padding: 0; text-align: center; width: #{p_pages.to_s.length+1}rem;">)
diff --git a/test/pagy/extras/navs_test.rb b/test/pagy/extras/navs_test.rb
index 9ae94a97b..de63417ae 100644
--- a/test/pagy/extras/navs_test.rb
+++ b/test/pagy/extras/navs_test.rb
@@ -42,19 +42,19 @@
     it 'renders first page' do
       pagy = Pagy.new(count: 103, page: 1)
       _(view.pagy_combo_nav_js(pagy, pagy_test_id)).must_equal \
-        "<nav id=\"test-id\" class=\"pagy-combo-nav-js-js pagination\" role=\"navigation\" aria-label=\"pager\"><span class=\"page prev disabled\">&lsaquo;&nbsp;Prev</span> <span class=\"pagy-combo-input\" style=\"margin: 0 0.6rem;\">Page <input type=\"number\" min=\"1\" max=\"6\" value=\"1\" style=\"padding: 0; text-align: center; width: 2rem;\"> of 6</span> <span class=\"page next\"><a href=\"/foo?page=2\"   rel=\"next\" aria-label=\"next\">Next&nbsp;&rsaquo;</a></span></nav><script type=\"application/json\" class=\"pagy-json\">[\"combo_nav\",\"test-id\",1,\"<a href=\\\"/foo?page=__pagy_page__\\\"   style=\\\"display: none;\\\"></a>\",null]</script>"
+        "<nav id=\"test-id\" class=\"pagy-combo-nav-js pagination\" role=\"navigation\" aria-label=\"pager\"><span class=\"page prev disabled\">&lsaquo;&nbsp;Prev</span> <span class=\"pagy-combo-input\" style=\"margin: 0 0.6rem;\">Page <input type=\"number\" min=\"1\" max=\"6\" value=\"1\" style=\"padding: 0; text-align: center; width: 2rem;\"> of 6</span> <span class=\"page next\"><a href=\"/foo?page=2\"   rel=\"next\" aria-label=\"next\">Next&nbsp;&rsaquo;</a></span></nav><script type=\"application/json\" class=\"pagy-json\">[\"combo_nav\",\"test-id\",1,\"<a href=\\\"/foo?page=__pagy_page__\\\"   style=\\\"display: none;\\\"></a>\",null]</script>"
     end
 
     it 'renders intermediate page' do
       pagy = Pagy.new(count: 103, page: 3)
       _(view.pagy_combo_nav_js(pagy, pagy_test_id)).must_equal \
-        "<nav id=\"test-id\" class=\"pagy-combo-nav-js-js pagination\" role=\"navigation\" aria-label=\"pager\"><span class=\"page prev\"><a href=\"/foo?page=2\"   rel=\"prev\" aria-label=\"previous\">&lsaquo;&nbsp;Prev</a></span> <span class=\"pagy-combo-input\" style=\"margin: 0 0.6rem;\">Page <input type=\"number\" min=\"1\" max=\"6\" value=\"3\" style=\"padding: 0; text-align: center; width: 2rem;\"> of 6</span> <span class=\"page next\"><a href=\"/foo?page=4\"   rel=\"next\" aria-label=\"next\">Next&nbsp;&rsaquo;</a></span></nav><script type=\"application/json\" class=\"pagy-json\">[\"combo_nav\",\"test-id\",3,\"<a href=\\\"/foo?page=__pagy_page__\\\"   style=\\\"display: none;\\\"></a>\",null]</script>"
+        "<nav id=\"test-id\" class=\"pagy-combo-nav-js pagination\" role=\"navigation\" aria-label=\"pager\"><span class=\"page prev\"><a href=\"/foo?page=2\"   rel=\"prev\" aria-label=\"previous\">&lsaquo;&nbsp;Prev</a></span> <span class=\"pagy-combo-input\" style=\"margin: 0 0.6rem;\">Page <input type=\"number\" min=\"1\" max=\"6\" value=\"3\" style=\"padding: 0; text-align: center; width: 2rem;\"> of 6</span> <span class=\"page next\"><a href=\"/foo?page=4\"   rel=\"next\" aria-label=\"next\">Next&nbsp;&rsaquo;</a></span></nav><script type=\"application/json\" class=\"pagy-json\">[\"combo_nav\",\"test-id\",3,\"<a href=\\\"/foo?page=__pagy_page__\\\"   style=\\\"display: none;\\\"></a>\",null]</script>"
     end
 
     it 'renders last page' do
       pagy = Pagy.new(count: 103, page: 6)
       _(view.pagy_combo_nav_js(pagy, pagy_test_id)).must_equal \
-        "<nav id=\"test-id\" class=\"pagy-combo-nav-js-js pagination\" role=\"navigation\" aria-label=\"pager\"><span class=\"page prev\"><a href=\"/foo?page=5\"   rel=\"prev\" aria-label=\"previous\">&lsaquo;&nbsp;Prev</a></span> <span class=\"pagy-combo-input\" style=\"margin: 0 0.6rem;\">Page <input type=\"number\" min=\"1\" max=\"6\" value=\"6\" style=\"padding: 0; text-align: center; width: 2rem;\"> of 6</span> <span class=\"page next disabled\">Next&nbsp;&rsaquo;</span></nav><script type=\"application/json\" class=\"pagy-json\">[\"combo_nav\",\"test-id\",6,\"<a href=\\\"/foo?page=__pagy_page__\\\"   style=\\\"display: none;\\\"></a>\",null]</script>"
+        "<nav id=\"test-id\" class=\"pagy-combo-nav-js pagination\" role=\"navigation\" aria-label=\"pager\"><span class=\"page prev\"><a href=\"/foo?page=5\"   rel=\"prev\" aria-label=\"previous\">&lsaquo;&nbsp;Prev</a></span> <span class=\"pagy-combo-input\" style=\"margin: 0 0.6rem;\">Page <input type=\"number\" min=\"1\" max=\"6\" value=\"6\" style=\"padding: 0; text-align: center; width: 2rem;\"> of 6</span> <span class=\"page next disabled\">Next&nbsp;&rsaquo;</span></nav><script type=\"application/json\" class=\"pagy-json\">[\"combo_nav\",\"test-id\",6,\"<a href=\\\"/foo?page=__pagy_page__\\\"   style=\\\"display: none;\\\"></a>\",null]</script>"
     end
 
   end
diff --git a/test/pagy/extras/trim_test.rb b/test/pagy/extras/trim_test.rb
index d30e88186..5f42617d7 100644
--- a/test/pagy/extras/trim_test.rb
+++ b/test/pagy/extras/trim_test.rb
@@ -94,7 +94,7 @@
 
     it 'renders first page' do
       pagy = Pagy.new(count: 103, page: 1)
-      _(view.pagy_combo_nav_js(pagy, pagy_test_id)).must_equal "<nav id=\"test-id\" class=\"pagy-combo-nav-js-js pagination\" role=\"navigation\" aria-label=\"pager\"><span class=\"page prev disabled\">&lsaquo;&nbsp;Prev</span> <span class=\"pagy-combo-input\" style=\"margin: 0 0.6rem;\">Page <input type=\"number\" min=\"1\" max=\"6\" value=\"1\" style=\"padding: 0; text-align: center; width: 2rem;\"> of 6</span> <span class=\"page next\"><a href=\"/foo?page=2\"   rel=\"next\" aria-label=\"next\">Next&nbsp;&rsaquo;</a></span></nav><script type=\"application/json\" class=\"pagy-json\">[\"combo_nav\",\"test-id\",1,\"<a href=\\\"/foo?page=__pagy_page__\\\"   style=\\\"display: none;\\\"></a>\",\"page\"]</script>"
+      _(view.pagy_combo_nav_js(pagy, pagy_test_id)).must_equal "<nav id=\"test-id\" class=\"pagy-combo-nav-js pagination\" role=\"navigation\" aria-label=\"pager\"><span class=\"page prev disabled\">&lsaquo;&nbsp;Prev</span> <span class=\"pagy-combo-input\" style=\"margin: 0 0.6rem;\">Page <input type=\"number\" min=\"1\" max=\"6\" value=\"1\" style=\"padding: 0; text-align: center; width: 2rem;\"> of 6</span> <span class=\"page next\"><a href=\"/foo?page=2\"   rel=\"next\" aria-label=\"next\">Next&nbsp;&rsaquo;</a></span></nav><script type=\"application/json\" class=\"pagy-json\">[\"combo_nav\",\"test-id\",1,\"<a href=\\\"/foo?page=__pagy_page__\\\"   style=\\\"display: none;\\\"></a>\",\"page\"]</script>"
       _(view.pagy_bootstrap_combo_nav_js(pagy, pagy_test_id)).must_equal "<nav id=\"test-id\" class=\"pagy-bootstrap-combo-nav-js pagination\" role=\"navigation\" aria-label=\"pager\"><div class=\"btn-group\" role=\"group\"><a class=\"prev btn btn-primary disabled\" href=\"#\">&lsaquo;&nbsp;Prev</a><div class=\"pagy-combo-input btn btn-primary disabled\" style=\"white-space: nowrap;\">Page <input type=\"number\" min=\"1\" max=\"6\" value=\"1\" class=\"text-primary\" style=\"padding: 0; border: none; text-align: center; width: 2rem;\"> of 6</div><a href=\"/foo?page=2\"   rel=\"next\" aria-label=\"next\" class=\"next btn btn-primary\">Next&nbsp;&rsaquo;</a></div></nav><script type=\"application/json\" class=\"pagy-json\">[\"combo_nav\",\"test-id\",1,\"<a href=\\\"/foo?page=__pagy_page__\\\"   style=\\\"display: none;\\\"></a>\",\"page\"]</script>"
       _(view.pagy_bulma_combo_nav_js(pagy, pagy_test_id)).must_equal "<nav id=\"test-id\" class=\"pagy-bulma-combo-nav-js\" role=\"navigation\" aria-label=\"pagination\"><div class=\"field is-grouped is-grouped-centered\" role=\"group\"><p class=\"control\"><a class=\"button\" disabled>&lsaquo;&nbsp;Prev</a></p><div class=\"pagy-combo-input control level is-mobile\">Page <input class=\"input\" type=\"number\" min=\"1\" max=\"6\" value=\"1\" style=\"padding: 0; text-align: center; width: 2rem; margin:0 0.3rem;\"> of 6</div><p class=\"control\"><a href=\"/foo?page=2\"   rel=\"next\" class=\"button\" aria-label=\"next page\">Next&nbsp;&rsaquo;</a></p></div></nav><script type=\"application/json\" class=\"pagy-json\">[\"combo_nav\",\"test-id\",1,\"<a href=\\\"/foo?page=__pagy_page__\\\"   style=\\\"display: none;\\\"></a>\",\"page\"]</script>"
       _(view.pagy_foundation_combo_nav_js(pagy, pagy_test_id)).must_equal "<nav id=\"test-id\" class=\"pagy-foundation-combo-nav-js\" role=\"navigation\" aria-label=\"Pagination\"><div class=\"input-group\"><a style=\"margin-bottom: 0px;\" class=\"prev button primary disabled\" href=\"#\">&lsaquo;&nbsp;Prev</a><span class=\"input-group-label\">Page <input class=\"input-group-field cell shrink\" type=\"number\" min=\"1\" max=\"6\" value=\"1\" style=\"width: 2rem; padding: 0 0.3rem; margin: 0 0.3rem;\"> of 6</span><a href=\"/foo?page=2\"   rel=\"next\" style=\"margin-bottom: 0px;\" aria-label=\"next\" class=\"next button primary\">Next&nbsp;&rsaquo;</a></div></nav><script type=\"application/json\" class=\"pagy-json\">[\"combo_nav\",\"test-id\",1,\"<a href=\\\"/foo?page=__pagy_page__\\\"   style=\\\"display: none;\\\"></a>\",\"page\"]</script>"
@@ -105,13 +105,13 @@
     it 'renders intermediate page' do
       pagy = Pagy.new(count: 103, page: 3)
       html = view.pagy_combo_nav_js(pagy, pagy_test_id)
-      _(html).must_equal "<nav id=\"test-id\" class=\"pagy-combo-nav-js-js pagination\" role=\"navigation\" aria-label=\"pager\"><span class=\"page prev\"><a href=\"/foo?page=2\"   rel=\"prev\" aria-label=\"previous\">&lsaquo;&nbsp;Prev</a></span> <span class=\"pagy-combo-input\" style=\"margin: 0 0.6rem;\">Page <input type=\"number\" min=\"1\" max=\"6\" value=\"3\" style=\"padding: 0; text-align: center; width: 2rem;\"> of 6</span> <span class=\"page next\"><a href=\"/foo?page=4\"   rel=\"next\" aria-label=\"next\">Next&nbsp;&rsaquo;</a></span></nav><script type=\"application/json\" class=\"pagy-json\">[\"combo_nav\",\"test-id\",3,\"<a href=\\\"/foo?page=__pagy_page__\\\"   style=\\\"display: none;\\\"></a>\",\"page\"]</script>"
+      _(html).must_equal "<nav id=\"test-id\" class=\"pagy-combo-nav-js pagination\" role=\"navigation\" aria-label=\"pager\"><span class=\"page prev\"><a href=\"/foo?page=2\"   rel=\"prev\" aria-label=\"previous\">&lsaquo;&nbsp;Prev</a></span> <span class=\"pagy-combo-input\" style=\"margin: 0 0.6rem;\">Page <input type=\"number\" min=\"1\" max=\"6\" value=\"3\" style=\"padding: 0; text-align: center; width: 2rem;\"> of 6</span> <span class=\"page next\"><a href=\"/foo?page=4\"   rel=\"next\" aria-label=\"next\">Next&nbsp;&rsaquo;</a></span></nav><script type=\"application/json\" class=\"pagy-json\">[\"combo_nav\",\"test-id\",3,\"<a href=\\\"/foo?page=__pagy_page__\\\"   style=\\\"display: none;\\\"></a>\",\"page\"]</script>"
     end
 
     it 'renders last page' do
       pagy = Pagy.new(count: 103, page: 6)
       html = view.pagy_combo_nav_js(pagy, pagy_test_id)
-      _(html).must_equal "<nav id=\"test-id\" class=\"pagy-combo-nav-js-js pagination\" role=\"navigation\" aria-label=\"pager\"><span class=\"page prev\"><a href=\"/foo?page=5\"   rel=\"prev\" aria-label=\"previous\">&lsaquo;&nbsp;Prev</a></span> <span class=\"pagy-combo-input\" style=\"margin: 0 0.6rem;\">Page <input type=\"number\" min=\"1\" max=\"6\" value=\"6\" style=\"padding: 0; text-align: center; width: 2rem;\"> of 6</span> <span class=\"page next disabled\">Next&nbsp;&rsaquo;</span></nav><script type=\"application/json\" class=\"pagy-json\">[\"combo_nav\",\"test-id\",6,\"<a href=\\\"/foo?page=__pagy_page__\\\"   style=\\\"display: none;\\\"></a>\",\"page\"]</script>"
+      _(html).must_equal "<nav id=\"test-id\" class=\"pagy-combo-nav-js pagination\" role=\"navigation\" aria-label=\"pager\"><span class=\"page prev\"><a href=\"/foo?page=5\"   rel=\"prev\" aria-label=\"previous\">&lsaquo;&nbsp;Prev</a></span> <span class=\"pagy-combo-input\" style=\"margin: 0 0.6rem;\">Page <input type=\"number\" min=\"1\" max=\"6\" value=\"6\" style=\"padding: 0; text-align: center; width: 2rem;\"> of 6</span> <span class=\"page next disabled\">Next&nbsp;&rsaquo;</span></nav><script type=\"application/json\" class=\"pagy-json\">[\"combo_nav\",\"test-id\",6,\"<a href=\\\"/foo?page=__pagy_page__\\\"   style=\\\"display: none;\\\"></a>\",\"page\"]</script>"
     end
 
   end

From c2e8eefbc53086561376f3576729e32cd34c6973 Mon Sep 17 00:00:00 2001
From: Domizio Demichelis <dd.nexus@gmail.com>
Date: Sun, 28 Jun 2020 16:33:20 +0700
Subject: [PATCH 2/5] added "Customizing CSS styles" how to section

---
 docs/how-to.md | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/docs/how-to.md b/docs/how-to.md
index cbfa914a9..9ae17ce6b 100644
--- a/docs/how-to.md
+++ b/docs/how-to.md
@@ -310,6 +310,17 @@ You have a few ways to do that:
 
 **Notice**: The variables passed to a Pagy object have the precedence over the variables returned by the `pagy_get_vars`. The fastest way to set the `i18n_key` is passing a literal string to the `pagy` method, the most convenient way is using `pagy_get_vars`, the most flexible way is passing a pluralized string to the helper.
 
+## Customizing CSS styles
+
+Pagy provides a few frontend extras for [bootstrap](extras/bootstrap.md), [bulma](extras/bulma.md), [foundation](extras/foundation.md), [materialize](extras/materialize.md), [semantic](extras/semantic.md) and [uikit](extras/uikit.md) that come with a decent styling provided by their framework.
+
+If you need to further customize the provided styles, you don't necessary need to override the helpers/templates. Here are a few alternatives:
+
+- define the CSS styles to apply to the pagy CSS classes
+- when sass/scss is available: extend the pagy CSS classes with some framework defined class, using the `@extend` sass/scss directive
+- use the jQuery `addClass` method
+- use a couple of lines of plain javascript
+
 ## Paginate an Array
 
 Please, use the [array](extras/array.md) extra.

From 62bd4acb748b2a5d8f412459e0d7a2a798ff6a46 Mon Sep 17 00:00:00 2001
From: Domizio Demichelis <dd.nexus@gmail.com>
Date: Sun, 28 Jun 2020 18:09:33 +0700
Subject: [PATCH 3/5] added tailwind extra styles

---
 README.md                  |  1 +
 docs/_layouts/default.html |  1 +
 docs/extras.md             |  1 +
 docs/extras/tailwind.md    | 54 ++++++++++++++++++++++++++++++++++++++
 docs/how-to.md             |  4 +--
 5 files changed, 59 insertions(+), 2 deletions(-)
 create mode 100644 docs/extras/tailwind.md

diff --git a/README.md b/README.md
index 5afbab640..128b943f1 100644
--- a/README.md
+++ b/README.md
@@ -124,6 +124,7 @@ Use the official extras, or write your own in just a few lines. Extras add speci
 - [materialize](http://ddnexus.github.io/pagy/extras/materialize): Add nav, nav_js and combo_nav_js helpers for the Materialize CSS [pagination component](https://materializecss.com/pagination.html)
 - [navs](http://ddnexus.github.io/pagy/extras/navs): Add nav_js and combo_nav_js unstyled helpers
 - [semantic](http://ddnexus.github.io/pagy/extras/semantic): Add nav, nav_js and combo_nav_js helpers for the Semantic UI CSS [pagination component](https://semantic-ui.com/collections/menu.html)
+- [tailwind](http://ddnexus.github.io/pagy/extras/tailwind): Extra styles for [Tailwind CSS](https://tailwindcss.com)
 - [uikit](http://ddnexus.github.io/pagy/extras/uikit): Add nav, nav_js and combo_nav_js helpers for the UIkit [pagination component](https://getuikit.com/docs/pagination)
 
 ### Feature Extras
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index 52ee693f8..043c939c5 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -121,6 +121,7 @@ <h1 id="site-title">{{ site.title | default: site.github.repository_name }}
       <a href="{{ site.baseurl }}/extras/searchkick"><p class="indent1" {% if page.title == 'Searchkick' %}id="active"{% endif %} >Searchkick</p></a>
       <a href="{{ site.baseurl }}/extras/semantic"><p class="indent1" {% if page.title == 'Semantic' %}id="active"{% endif %} >Semantic</p></a>
       <a href="{{ site.baseurl }}/extras/support"><p class="indent1" {% if page.title == 'Support' %}id="active"{% endif %} >Support</p></a>
+      <a href="{{ site.baseurl }}/extras/tailwind"><p class="indent1" {% if page.title == 'Tailwind' %}id="active"{% endif %} >Tailwind</p></a>
       <a href="{{ site.baseurl }}/extras/trim"><p class="indent1" {% if page.title == 'Trim' %}id="active"{% endif %} >Trim</p></a>
       <a href="{{ site.baseurl }}/extras/uikit"><p class="indent1" {% if page.title == 'UIkit' %}id="active"{% endif %} >UIkit</p></a>
     </div>
diff --git a/docs/extras.md b/docs/extras.md
index 0366a9bb0..20575101d 100644
--- a/docs/extras.md
+++ b/docs/extras.md
@@ -25,6 +25,7 @@ Pagy comes with a few optional extensions/extras:
 | `semantic`            | Add nav, nav_js and combo_nav_js helpers for the Semantic UI CSS [pagination component](https://semantic-ui.com/collections/menu.html)     | [semantic.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/semantic.rb), [documentation](http://ddnexus.github.io/pagy/extras/semantic)                                  |
 | `support`             | Extra support for features like: incremental, infinite, auto-scroll pagination                                                             | [support.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/support.rb), [documentation](http://ddnexus.github.io/pagy/extras/support)                                     |
 | `trim`                | Remove the `page=1` param from links                                                                                                       | [trim.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/trim.rb), [documentation](http://ddnexus.github.io/pagy/extras/trim)                                              |
+| `tailwind`            | Extra styles for [Tailwind CSS](https://tailwindcss.com)                                                                                   | [documentation](http://ddnexus.github.io/pagy/extras/tailwind)                                                                                                                          |
 | `uikit`               | Add nav, nav_js and combo_nav_js helpers for the UIkit [pagination component](https://getuikit.com/docs/pagination)                        | [uikit.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/uikit.rb), [documentation](http://ddnexus.github.io/pagy/extras/uikit)                                           |
 
 ## Synopsis
diff --git a/docs/extras/tailwind.md b/docs/extras/tailwind.md
new file mode 100644
index 000000000..0cd679d6f
--- /dev/null
+++ b/docs/extras/tailwind.md
@@ -0,0 +1,54 @@
+---
+title: Tailwind
+---
+# Tailwind Extra Styles
+
+Tailwind allows to apply styles to any DOM element, so - if you use it - you don't actually need a special extra to produce a different output. You can use the standard unstyled pagy helpers: i.e. the default `pagy_nav` and the `pagy_nav_js`and `pagy_nav_combo_js` provided by the [navs](navs.md) extra, and apply the styles to their classes.
+
+## Synopsis
+
+See the [navs](navs.md) extra if you use `pagy_nav_js` or `pagy_combo_nav_js`.
+
+Copy and customize the following basic rules to apply the styles to the pagy CSS classes:
+
+```scss
+.pagy-nav, 
+.pagy-nav-js,
+.pagy-combo-nav-js {
+  @apply .inline-flex .shadow-md;
+}
+.pagy-nav.pagination, 
+.pagy-nav-js.pagination,
+.pagy-combo-nav-js.pagination {
+  @apply .border .border-gray-600 .rounded-sm;
+}
+.pagy-nav .page,
+.pagy-nav-js .page,
+.pagy-combo-nav-js .page,
+.pagy-combo-nav-js .pagy-combo-input {
+  @apply .text-gray-700 .border-r .border-gray-600 .px-3 .py-2 .text-sm .leading-tight .font-medium;
+}
+.pagy-nav .page:hover,
+.pagy-nav-js .page:hover {
+  @apply .text-gray-900;
+}
+.pagy-nav .disabled,
+.pagy-nav-js .disabled,
+.pagy-combo-nav-js .disabled {
+  @apply .cursor-not-allowed;
+}
+.pagy-nav .active,
+.pagy-nav-js .active {
+  @apply .text-blue-500;
+}
+.pagy-nav .prev,
+.pagy-nav-js .prev,
+.pagy-combo-nav-js .prev {
+  @apply .text-gray-900;
+}
+.pagy-nav .next,
+ .pagy-nav-js .next,
+ .pagy-combo-nav-js .next {
+  @apply .text-gray-900 .border-r .border-transparent;
+}
+```
diff --git a/docs/how-to.md b/docs/how-to.md
index 9ae17ce6b..01dab897b 100644
--- a/docs/how-to.md
+++ b/docs/how-to.md
@@ -312,7 +312,7 @@ You have a few ways to do that:
 
 ## Customizing CSS styles
 
-Pagy provides a few frontend extras for [bootstrap](extras/bootstrap.md), [bulma](extras/bulma.md), [foundation](extras/foundation.md), [materialize](extras/materialize.md), [semantic](extras/semantic.md) and [uikit](extras/uikit.md) that come with a decent styling provided by their framework.
+Pagy provides a few frontend extras for [bootstrap](extras/bootstrap.md), [bulma](extras/bulma.md), [foundation](extras/foundation.md), [materialize](extras/materialize.md), [semantic](extras/semantic.md), [tailwind](https://tailwindcss.com) and [uikit](extras/uikit.md) that come with a decent styling provided by their framework.
 
 If you need to further customize the provided styles, you don't necessary need to override the helpers/templates. Here are a few alternatives:
 
@@ -430,7 +430,7 @@ These helpers take the Pagy object and return the HTML string with the paginatio
 | [materialize](extras/materialize.md) | `pagy_materialize_nav`, `pagy_materialize_nav_js`, `pagy_materialize_combo_nav_js` |
 | [navs](extras/navs.md)               | `pagy_nav_js`, `pagy_combo_nav_js`                                                 |
 | [semantic](extras/semantic.md)       | `pagy_semantic_nav`, `pagy_semantic_nav_js`, `pagy_semantic_combo_nav_js`          |
-| [uikit](extras/uikit.md)             | `pagy_uikit_nav`, `pagy_uikit_nav_js`, `pagy_uikit_combo_nav_js`                                                                   |
+| [uikit](extras/uikit.md)             | `pagy_uikit_nav`, `pagy_uikit_nav_js`, `pagy_uikit_combo_nav_js`                   |
 
 Helpers are the preferred choice (over templates) for their performance. If you need to override a `pagy_nav*` helper you can copy and paste it in your helper and edit it there. It is a simple concatenation of strings with a very simple logic.
 

From c7aa44d688c3fb97a25e507f1cf262ba1c42daa3 Mon Sep 17 00:00:00 2001
From: Domizio Demichelis <dd.nexus@gmail.com>
Date: Mon, 29 Jun 2020 17:14:32 +0700
Subject: [PATCH 4/5] updated gems

---
 Gemfile      | 42 ++++++++++++++++++++++++------------------
 Gemfile.lock | 46 ++++++++++++++++++++++++++++++++++++----------
 2 files changed, 60 insertions(+), 28 deletions(-)

diff --git a/Gemfile b/Gemfile
index d4eaeb918..ab44a5042 100644
--- a/Gemfile
+++ b/Gemfile
@@ -1,29 +1,35 @@
 source "https://rubygems.org"
 
-git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }
-
-# test
 gem 'rake'
-gem 'minitest', '~> 5.12'
-gem 'minitest-reporters'
 gem 'rack'
 gem 'i18n'
 
 gem 'oj', require: false     # false is for testing with or without it
 
-gem 'rubocop', '~> 0.82.0'
-gem 'rubocop-performance', '~> 1.5.0'
-gem 'simplecov', require: false
-gem 'codecov', :require => false
-
-# development
-# gem 'slim'
-# gem 'haml'
+gem 'puma'
 
-# benchmark/profiling
-# gem 'benchmark-ips'
-# gem 'kalibera'
-# gem 'memory_profiler'
+group :test do
+  gem 'rubocop', '~> 0.82.0'
+  gem 'rubocop-performance', '~> 1.5.0'
+  gem 'simplecov', require: false
+  gem 'codecov', require:  false
+  gem 'minitest'
+  gem 'minitest-reporters'
+end
 
 # docs server
-gem "github-pages", '204', group: :jekyll_plugins
+gem "github-pages", '206', group: :jekyll_plugins
+
+group :apps do
+  gem 'sinatra'
+  gem 'sinatra-contrib'
+  # gem 'slim'
+  # gem 'haml'
+end
+
+# group :performance do
+  # benchmark/profiling
+  # gem 'benchmark-ips'
+  # gem 'kalibera'
+  # gem 'memory_profiler'
+# end
diff --git a/Gemfile.lock b/Gemfile.lock
index 3ffa2f6f5..3810b800c 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -1,7 +1,7 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    activesupport (6.0.3.1)
+    activesupport (6.0.3.2)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 0.7, < 2)
       minitest (~> 5.1)
@@ -11,6 +11,7 @@ GEM
       public_suffix (>= 2.0.2, < 5.0)
     ansi (1.5.0)
     ast (2.4.1)
+    backports (3.18.1)
     builder (3.2.4)
     codecov (0.1.17)
       json
@@ -39,9 +40,9 @@ GEM
     ffi (1.13.1)
     forwardable-extended (2.6.0)
     gemoji (3.0.1)
-    github-pages (204)
+    github-pages (206)
       github-pages-health-check (= 1.16.1)
-      jekyll (= 3.8.5)
+      jekyll (= 3.8.7)
       jekyll-avatar (= 0.7.0)
       jekyll-coffeescript (= 1.1.1)
       jekyll-commonmark-ghpages (= 0.1.6)
@@ -80,7 +81,7 @@ GEM
       mercenary (~> 0.3)
       minima (= 2.5.1)
       nokogiri (>= 1.10.4, < 2.0)
-      rouge (= 3.13.0)
+      rouge (= 3.19.0)
       terminal-table (~> 1.4)
     github-pages-health-check (1.16.1)
       addressable (~> 2.3)
@@ -95,7 +96,7 @@ GEM
     i18n (0.9.5)
       concurrent-ruby (~> 1.0)
     jaro_winkler (1.5.4)
-    jekyll (3.8.5)
+    jekyll (3.8.7)
       addressable (~> 2.4)
       colorator (~> 1.0)
       em-websocket (~> 0.5)
@@ -218,7 +219,11 @@ GEM
       builder
       minitest (>= 5.0)
       ruby-progressbar
+    multi_json (1.14.1)
     multipart-post (2.1.1)
+    mustermann (1.1.1)
+      ruby2_keywords (~> 0.0.1)
+    nio4r (2.5.2)
     nokogiri (1.10.9)
       mini_portile2 (~> 2.4.0)
     octokit (4.18.0)
@@ -231,14 +236,18 @@ GEM
     pathutil (0.16.2)
       forwardable-extended (~> 2.6)
     public_suffix (3.1.1)
-    rack (2.2.2)
+    puma (4.3.5)
+      nio4r (~> 2.0)
+    rack (2.2.3)
+    rack-protection (2.0.8.1)
+      rack
     rainbow (3.0.0)
     rake (13.0.1)
     rb-fsevent (0.10.4)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
     rexml (3.2.4)
-    rouge (3.13.0)
+    rouge (3.19.0)
     rubocop (0.82.0)
       jaro_winkler (~> 1.5.1)
       parallel (~> 1.10)
@@ -252,6 +261,7 @@ GEM
     ruby-enum (0.8.0)
       i18n
     ruby-progressbar (1.10.1)
+    ruby2_keywords (0.0.2)
     rubyzip (2.3.0)
     safe_yaml (1.0.5)
     sass (3.7.4)
@@ -266,32 +276,48 @@ GEM
       docile (~> 1.1)
       simplecov-html (~> 0.11)
     simplecov-html (0.12.2)
+    sinatra (2.0.8.1)
+      mustermann (~> 1.0)
+      rack (~> 2.0)
+      rack-protection (= 2.0.8.1)
+      tilt (~> 2.0)
+    sinatra-contrib (2.0.8.1)
+      backports (>= 2.8.2)
+      multi_json
+      mustermann (~> 1.0)
+      rack-protection (= 2.0.8.1)
+      sinatra (= 2.0.8.1)
+      tilt (~> 2.0)
     terminal-table (1.8.0)
       unicode-display_width (~> 1.1, >= 1.1.1)
     thread_safe (0.3.6)
+    tilt (2.0.10)
     typhoeus (1.4.0)
       ethon (>= 0.9.0)
     tzinfo (1.2.7)
       thread_safe (~> 0.1)
     unicode-display_width (1.7.0)
     url (0.3.2)
-    zeitwerk (2.3.0)
+    zeitwerk (2.3.1)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
   codecov
-  github-pages (= 204)
+  github-pages (= 206)
   i18n
-  minitest (~> 5.12)
+  minitest
   minitest-reporters
   oj
+  puma
   rack
   rake
   rubocop (~> 0.82.0)
   rubocop-performance (~> 1.5.0)
   simplecov
+  sinatra
+  sinatra-contrib
 
 BUNDLED WITH
    2.1.4

From 734f30c1b5108e014398601da08f7c6cc79d2f53 Mon Sep 17 00:00:00 2001
From: Domizio Demichelis <dd.nexus@gmail.com>
Date: Mon, 29 Jun 2020 17:14:51 +0700
Subject: [PATCH 5/5] added basic sinatra app

---
 apps/basic_app.ru | 111 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 111 insertions(+)
 create mode 100644 apps/basic_app.ru

diff --git a/apps/basic_app.ru b/apps/basic_app.ru
new file mode 100644
index 000000000..66196c4d4
--- /dev/null
+++ b/apps/basic_app.ru
@@ -0,0 +1,111 @@
+# Basec self-contained rack/sinatra app
+# edit or duplicate this app to experiment with the pagy features
+
+# USAGE: rackup -I lib -o 0.0.0.0 -p 8080 apps/basic_app.ru
+
+# standard bundler using project Gemfile
+require 'rubygems'
+require 'bundler'
+Bundler.require(:default, :apps)
+
+require 'pagy'
+
+# pagy initializer
+require 'pagy/extras/navs'
+require 'pagy/extras/items'
+require 'pagy/extras/trim' if ENV['ENABLE_TRIM']
+require 'oj' if ENV['ENABLE_OJ']
+
+# sinatra setup
+require "sinatra/base"
+require "sinatra/reloader"
+
+
+# simple array-based collection that acts as standard DB collection
+class MockCollection < Array
+
+  def initialize(arr=Array(1..1000))
+    super
+    @collection = self.clone
+  end
+
+  def offset(value)
+    @collection = self[value..-1]
+    self
+  end
+
+  def limit(value)
+    @collection[0, value]
+  end
+
+  def count(*)
+    size
+  end
+
+end
+
+# sinatra application
+class PagyApp < Sinatra::Base
+
+  configure do
+    enable :inline_templates
+  end
+
+  configure :development do
+    register Sinatra::Reloader
+  end
+
+  include Pagy::Backend
+  include Pagy::Frontend
+
+  get '/pagy.js' do
+    content_type 'application/javascript'
+    send_file Pagy.root.join('javascripts', 'pagy.js')
+  end
+
+  get '/' do
+    redirect '/helpers'
+  end
+
+  get '/helpers' do
+    collection = MockCollection.new
+    @pagy, _   = pagy(collection)
+    erb :helpers
+  end
+
+  get '/no-pagy' do
+    erb :'no-pagy'
+  end
+
+end
+
+run PagyApp
+
+
+__END__
+
+@@ layout
+<html>
+<head>
+  <script type="application/javascript" src="/pagy.js"></script>
+  <script type="application/javascript">
+    window.addEventListener("load", Pagy.init);
+  </script>
+</head>
+<body>
+  <%= yield %>
+</body>
+</html>
+
+@@ helpers
+<br>
+<%= pagy_nav(@pagy) %>
+<br>
+<%= pagy_nav_js(@pagy) %>
+<br>
+<%= pagy_combo_nav_js(@pagy) %>
+<br>
+<%= pagy_items_selector_js(@pagy) %>
+
+@@ no-pagy
+<p>Just a page without pagy</p>