ポンコツエンジニアのごじゃっぺ開発日記。

いろいろポンコツだけど、気にするな。エンジニアの日々の開発などの記録を残していきます。 自動で収入を得られるサービスやシステムを作ることが目標!!

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

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

f:id:ponkotsu0605:20201221161936p:plain
正常系

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

f:id:ponkotsu0605:20201221161849p:plain
異常系

ドキュメントの再確認

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

表示結果

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

f:id:ponkotsu0605:20201221194820p:plain
Tailwind CSSを利用したページネーション

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

お問い合わせプライバシーポリシー制作物