NextJS プロジェクトで Tailwind と MUI を使用する場合の予期しない動作 (白いボタンのバグ)

Question

現在、NextJS、TailwindCSS、および MUI React UI ライブラリを使用してプロジェクトを構築しています。

MUI ボタン​​をプロジェクトに追加しようとすると、正常に機能しますが、ボタンの色は白のままです。

ホバーすると色は通常に戻りますが、ボタンをクリックすると波紋効果が残ります。ただし、ホバリングしていない場合は白に戻ります。

_app.{js,jsx.ts,tsx} ファイルにインポートしたグローバル CSS ファイルから tailwind ディレクティブを削除すると、ボタンは再び正常に機能しましたが、これにより TailwindCSS も削除されました。

ディレクティブを保持したまま修正する方法はありますか?それとも、別の方法を使用して、tailwind CSS を含めるのでしょうか?

更新 (2022年8月15日)

MUI チームは、tailwind CSS のサポートを追加しました。手順については、このリンクに従ってください。 https://mui.com/material-ui/guides/interoperability/#tailwind-css

Answer 1

ここでの問題は、tailwinds preflig が次のスタイルを実装していることです。

を追加する場合 リーリー

スタイルシートへ:

リーリー

これは、material-ui の背景色の定義よりも具体的です。

この問題は、スタイルから「@tailwind Base;」を削除し、独自のリセット スタイルシートを実装することで回避できますが、これには別の欠点もあります。 https://tailwindcss.com/docs/preflight