🗂
Tailwind/typographyを導入したらエラーで詰まった
はじめに
現在、Next.jsとmicro CMSでブログを作成しています。
その中でリッチテキストエディタの文字部分をいい感じにスタイリングしてくれるTailwind/typographyを導入したらエラーで詰まり、エラー分をググって解決できたのですがgithuｂなどの英語情報しかなかったので今回記事に書き留めようと思った次第です。
Tailwind/typographyを導入する
- Tailwind CSS を導入する（割愛）
- Tailwind/typographyを導入する
npm install -D @tailwindcss/typography
or
yarn add -D @tailwindcss/typography
これだけで良いと公式ドキュメントにも書いてますが表題のとおりエラーが発生。。。
【Tailwind CSS公式ドキュメント】
エラー文
TypeError: Cannot read properties of undefined (reading '700')
上記のようなエラー文が発生。
解決方法
以下githubのリンクにて解決。
自分で作成したNext.jsのテンプレートリポジトリの中のTailwind CSSのバージョンが古く、typographyと互換性がなかった為に発生したようです。(旧バージョンは^2.2.4)
Tailwind CSSを最新版にすれば解決しました。
最後に
今回はパッケージのバージョン管理はしっかり行うことの大切さを学び、日本語での記事などが見つからなかったことから解決に少し時間がかかってしまったので記事を書くことにしました。
同じエラーで詰まった方の助けになればと思います。
Discussion