【解決済み】Laravel 8.xにバージョンアップしたらページャーがおかしくなった

Laravelを5系から8系にバージョンアップさせてみたのですが、ページャーの表示がおかしくなりました。。

正常系

↑今まではこのように表示されていたのが、バージョンアップしてみると↓こんな感じになってしまいました。

異常系

ドキュメントの再確認

cssかなにかおかしいのかなと思って改めてドキュメントを見直してみました。

Laravel 8系

まずはLaravel 8系のページネーションのドキュメントです。

readouble.com

Laravel 7系

次にLaravel 7系のページネーションのドキュメントです。

readouble.com

差分

よく読んでみると、まずイントロダクションのところで以下のような差分がありました。

- ペジネータが生成するHTMLは、Bootstrap CSSフレームワークコンパチブルです。
+ ペジネータが生成するHTMLは、Tailwind CSSフレームワークコンパチブルです。

他のフレームワークのペジネーションは苦痛に満ちています。LaravelのペジネータはクエリビルダとEloquent ORMに統合されており、データベースの結果を簡単、お手軽にペジネーションできます。ペジネータが生成するHTMLは、Tailwind CSSフレームワークコンパチブルです。

Tailwind CSSフレームワークってなんだよ？

ペジネーション結果の表示の項目にも以下のように書いてあります。

linksメソッドは結果の残りのページヘのリンクをレンダーします。それらの各リンクにはpageクエリ文字列変数が含まれています。linksメソッドが生成するHTMLはTailwind CSSフレームワークと互換性があることを覚えておいてください。

ということで、生成されるHTMLはbootstrapとの互換性がなくなり、Tailwind CSSとの互換性があるようになったらしいです。なので、bootstrapのスタイルでは表示が崩れてしまうということですね。

Tailwind CSSのスタイルファイルを作成しよう

ということで、CSSファイルが必要です。

Tailwindの公式ドキュメントの、Laravelでの導入方法が書かれています。

tailwindcss.com

とりあえず何も考えずに書かれていることを試していきます。

Creating your project

$ laravel new my-project
$ cd my-project
$ npm install

ちなみに、nodejsのバージョンは以下で試しました。

$ node -v
v15.4.0

Setting up Tailwind CSS

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

ちょっと待って！自分の場合、今はとりあえずページネーションの表示崩れだけを直したいのです。ちゃんとした導入方法で入れる必要はなく、既に開発中・運用中のこのプロジェクトに入れたいので、tailwind.cssみたいなファイルが1つあれば十分なのです。それ以外は後から考えたい。

Include Tailwind in your CSS

ということで、tailwind.cssを作成します。

Include Tailwind in your CSSに書いてあるように、app.cssを作成します。

@tailwind base;
@tailwind components;
@tailwind utilities;

Create tailwind.css

そして、tailwind.cssファイルを作成します。 ここはドキュメントのどこに書いてあったのかはよく分からなかったのですが、ググってみて、こんな感じで出力できました。

$ npx tailwind build [app.cssが配置されているパス]/app.css -o tailwind.css

これを実行すると、tailwind.cssが出力されました。

スタイルを読み込む

後はこのcssファイルを読み込むだけです。

<link href="/css/tailwind.css" rel="stylesheet">

表示結果

そして、ページを確認してみましょう！

Tailwind CSSを利用したページネーション

無事、ページネーションが表示されるようになりました。 ただ、bootstrapのぺージャーに慣れてしまってたので、ちょっぴり新鮮です！

それでもBootstrapを使いたい場合

Boootstrapのデザインが好き、tailwindではヤダ。そんな方もいるかも知れません。 その場合は、AppServiceProviderのboot()にて以下のようにPaginator::useBootstrap();を追加するだけです。

use Illuminate\Pagination\Paginator;

...

    public function boot()
    {
        Paginator::useBootstrap();
    }

}

これで、Bootstrapのスタイルを使用することができます。