added tailwind extra styles

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

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>

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

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;
+}
+```

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.