CSStech!tailwind-mergeのアップデートで以下の記述では対応できなくなっています(2024/06/06)結論classGroupsでグループを指定する。CSSクラスを効率的にマージするためのユーティリティ関数。https://github.com/dcastil/tailwind-merge最近ではtailwind-variantsやshadcn/uiでも利用されています。通常tailwindcssで用意されているクラスを使用する場合、基本的に問題は発生しませんが同じグループに属しているが異なるCSSプロパティを使用するクラス、かつカスタムクラスで独自に作成したクラスなどでは意図しないマージが行われる場合があります。text-lg(font-size)、text-bulue-500(color)などのtext-***系では特に問題が発生しがちです。}]}}}}上記のカスタムクラスではtext-bodyでfont-size、line-heightなどが設定されたスタイルが使用できるようになりますが、color設定はありません。このクラスをcolor指定と同時に使用すると、プロパティの被りはないにも関わらずマージが行われ、text-bodyは消えてしまいます。※font-size指定で競合が発生するこれはtailwind-mergeが行うfont-size系の処理ではtext-以降の文字列部分が未知の色クラスという判定になるため、text-bodyとtext-blue-500で競合が発生したと見なされtext-blue-500だけが残る結果となります。このような意図しないマージを回避するためにtailwind-mergeではclass-groupsというオプションが用意されています。class-groupsオプションhttps://github.com/dcastil/tailwind-merge/blob/v1.14.0/docs/configuration.md#class-groups今回はtext-bodyのbody部分が色ではなく、font-sizeのグループに属する文字列ということをtailwind-merge側に伝える必要があるため、以下のようなclass-groupsオプションの指定を行います。}})こちらの指定を行うことでtext-bodyとtexe-blue-500が同居できるようになります。'text-lg'※font-sizeのグループはソースの以下部分で確認できます。https://github.com/dcastil/tailwind-merge/blob/v1.14.0/src/lib/default-config.ts#L619_H_R_⓿ᴥ⓿frontendバッジを贈って著者を応援しようバッジを受け取った著者にはZennから現金やAmazonギフトカードが還元されます。Proよくある質問LinksX(Twitter)GitHubメディアキットLegal利用規約プライバシーポリシ。