Laravel 8のPaginateでBootstrapからTailwind CSSへの移行に伴う変更点

Laravel8では、デフォルトのCSSフレームワークがBootstrapからTailwind CSSに変更されました。これに伴い、paginateの表示も変更されることになります。この記事では、Laravel8のpaginateを使用する際に、CSSフレームワークが変更されたことによる変更点について解説します。

まず、デフォルトで使用されるCSSフレームワークがBootstrapからTailwind CSSに変更されたことにより、paginateのスタイルも変更されました。以前のBootstrapのpaginateは、ページ番号やページリンクがブロック要素で表示され、カラーリングもBootstrapのデフォルトに準拠したものでした。一方、Tailwind CSSのpaginateは、ページ番号やページリンクがインライン要素で表示され、カラーリングもTailwind CSSのデフォルトに準拠したものに変更されました。

これに伴い、paginateのスタイルを変更するには、以前と同様にCSSファイルを作成してカスタマイズすることができますが、Tailwind CSSを使用する場合は、CSSファイルの作成よりもTailwind CSSのクラスを適用することが推奨されています。

例えば、以下のようにTailwind CSSのbg-whiteとborder-gray-200のクラスを使用して、paginateの背景色とボーダーを変更することができます。

{{ $users->links('pagination::tailwind') }}

/* tailwind.config.js */
module.exports = {
  // ...
  theme: {
    extend: {
      colors: {
        gray: {
          100: '#f7fafc',
          // ...
        },
      },
    },
  },
  variants: {},
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
  ],
};

上記の例では、pagination::tailwindを使用して、Tailwind CSSのpaginateを表示しています。また、tailwind.config.js内でテーマをカスタマイズして、bg-whiteとborder-gray-200のカラーパレットを定義しています。

以上が、Laravel8のpaginateで、CSSフレームワークがBootstrapからTailwind CSSに変更されたことによる変更点についての解説です。Tailwind CSSを使用することで、より簡単にスタイルをカスタマイズできるため、Laravel8のpaginateの利用者にとっては非常に便利な変更点と言えます。