Tailwind CSS を使う時に一緒に入れたいライブラリが参考になった。

px-4とpy-6というクラスを持つコンポーネントにp-10というクラスを渡した場合、CSS カスケードにより、p-10というスタイルは無視される。

CSS カスケードというのは、

異なるソースから来るプロパティ値を組み合わせる方法を定義するアルゴリズム

のこと。

で、今回は詳細度でp-10は無視される。

ただコンポーネントで上書きしようとしたスタイルが無視されるのは困る。

そこで必要となるのが、tailwind-merge。

tailwind-mergeはコンフリクトした Tailwind CSSのクラス名を取り除きつつ結合するライブラリで、上記では後から指定されたp-10により、px-4とpy-6というクラスが結果からとりの結果から取り除かれる。

結果、意図した挙動をするコンポーネントができあがる。