tailwindcssとMUIを併用しているときにButtonコンポーネントのvariantにcontainedを指定するとホバーしていない際にボタンが表示されなくなったので、その原因と解決策を書き残します。
解決策
一番簡単な解決策はtailwindcssのpreflightを停止することです。
module.exports = {
// 省略
corePlugins: {
preflight: false,
},
}
他にはpreflightを書き換えるなどでも対応可能なようです。詳しくは公式ドキュメントを参照のこと。↓
原因
このバグの原因はtailwind CSSのpreflightにあるようです。preflightとはスタイルの統一性を整えるためにtailwind CSSを使った際にデフォルトで付けられるスタイルのことです。以下のファイルで適用されています。
@tailwind base; /* Preflight will be injected here */
@tailwind components;
@tailwind utilities;
ここでbuttonタグすべてにbackground-color: transparentが適用されてしまっていました。
今回のようにMUIを使う際にはスタイルの統一性はそちらでとればよく、むしろ干渉してバグが起こりやすいのでpreflightは切ってしまってもよいと個人的には思います。ただ、それだとtailwindを使うメリットは減ってしまうのでmuiのsxのみ利用でもいいのかなと思ったりもします。
