🐸

Rails × Tailwind CSS に Pagy のページネーションをカスタマイズする方法

chima

2025/12/17に公開

Tailwind CSSを使用しているRailsアプリケーションで、Pagyのスタイルがうまく適用されずに困ったので、記事にしたいと思います。

 前提条件
 スペックRuby: 3.4.7
Ruby on Rails: 8.0.3
tailwindcss-rails gem: 4.3.0
pagy gem: 43.0.0

 Tailwind CSSについてTailwind CSSはCSSのフレームワークであり、Bootstrapのようなものと思っていただければと思います。
導入方法は、大きく2通りあります。

rails newするときに、オプションで-css tailwindを付与する
既存のアプリケーションの場合は、bundle add tailwindcss-railsで追加する
その後は公式ガイドを参照し、Pagy以外の箇所でスタイルが適用できていることを確認してください。

 Pagyについて名前から察することができるかと思いますが、Pagyとは、ページネーションを簡単に実装できるgemです。メジャーなところではKaminariがありますが、近年Pagyが勢力を上げてきているということで試してみることにしました。
導入方法は、基本的には公式のquick-startのとおりにすれば大丈夫です。
!Pagy gemは、v42以前とv43以降で導入方法が大きく異なっています。

本記事ではv43.0.0での事例を説明しますので、v42以前での動作保証はありません。

 Tailwind CSSでPagyのスタイルを適用したい本題です。

上記のquick-start通りに導入し、ビューに<%== @pagy.series_nav %>を記載したところ、以下のように全くスタイルが当たらないことに気付きました。

色々調べたけれど、関連記事などはなく…答えは公式サイトのstylesheetsページにありました。
Should you need finer control, the pagy.css and pagy-tailwind.css calculate more specific variables, that you can manually override.

訳↓

より細かい制御が必要な場合は、pagy.css と pagy-tailwind.css でより具体的な変数を計算し、手動で上書きすることができます。

 手順
https://ddnexus.github.io/pagy/resources/stylesheets/#pagy-tailwindcss からpagy-tailwind.cssをダウンロードします。
念の為ここにもコードをおいておきます。pagy-tailwind.css
@layer components {
  .pagy {
    --B: 1;
    --H: 0;
    --S: 0;
    --L: 50;
    --spacing: 0.125rem;
    --padding: 0.75rem;
    --rounding: 1.75rem;
    --border-width: 0rem;
    --font-size: 0.875rem;
    --font-weight: 600;
    --line-height: 1.75;

    --text:               hsl(var(--H) var(--S) calc(var(--L) - (30 * var(--B))));
    --text-hover:         hsl(var(--H) var(--S) calc(var(--L) - (33 * var(--B))));
    --text-current:       hsl(var(--H) var(--S) calc(100 * (var(--B) + 1)));
    --background:         hsl(var(--H) var(--S) calc(var(--L) + (30 * var(--B))));
    --background-hover:   hsl(var(--H) var(--S) calc(var(--L) + (20 * var(--B))));
    --background-current: hsl(var(--H) var(--S) var(--L));
    --background-input:   hsl(var(--H) var(--S) calc(var(--L) + (45 * var(--B))));
    --opacity: 1;

    @apply flex space-x-[var(--spacing)] font-[var(--font-weight)]
    text-[length:var(--font-size)] text-[var(--text)]
    leading-[var(--line-height)];

    a:not([role="separator"]) { /* all but gaps */
      @apply block rounded-[var(--rounding)] px-[var(--padding)] py-[calc(var(--padding)/3)] bg-[var(--background)]
      border-solid  border-[var(--background-current)] border-[length:var(--border-width)] opacity-[var(--opacity)];
    }

    a[href]:hover { /* all links on hover */
      @apply bg-[var(--background-hover)] text-[var(--text-hover)];
    }

    a:not([href]) { /* all but links */
      @apply cursor-default
    }

    a[role="link"]:not([aria-current]) { /* disabled links */
      @apply opacity-[calc(var(--opacity)*.6)];
    }

    a[aria-current] {  /* current page */
      @apply bg-[var(--background-current)] text-[var(--text-current)];
    }

    label {
      @apply inline-block whitespace-nowrap rounded-[var(--rounding)] px-[var(--padding)]
      py-[calc(var(--padding)/3-var(--border-width))]
      bg-[var(--background)] border-solid border-[length:var(--border-width)] border-[var(--background-current)];

      input {
        @apply text-[var(--text)] text-[length:var(--font-size)] leading-[var(--line-height)] rounded-[calc(var(--rounding)/2)]
        font-[var(--font-weight)] bg-[var(--background-input)] border-[length:var(--border-width)] border-[var(--background-current)];
      }
    }
  }
}
ダウンロードしたファイルをapp/assets/tailwind/pagy-tailwind.cssに保存

app/assets/tailwind/application.cssに、以下のように参照を追加
app/assets/tailwind/application.css
@import "tailwindcss";
+ @import "./pagy-tailwind.css";
ビューを確認。Styleが当たっています！！


これで完了です。もし、更にカスタマイズしたい場合はpagy-tailwind.cssを調整すればOKです。

 最後にPagyはまだ大幅に導入方法が変更されたり、過渡期であると思われます。

そのようなgemやツールを使用する際は、AIに聞いたり記事を検索しても解決しません。

改めて公式ドキュメントをしっかり確認することの大切さを感じました。

 お願い別の方法がある、新しいバージョンで方法が変わったようだ、等あればコメントいただけると助かります！！