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 @@

{{ site.title | default: site.github.repository_name }}

Searchkick

Semantic

Support

 +

Tailwind

Trim

UIkit

 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.