Comportement inattendu (bug du bouton blanc) lors de l'utilisation de Tailwind et MUI dans le projet NextJS

Question

Je construis actuellement un projet en utilisant la bibliothèque NextJS, TailwindCSS et MUI React UI.

Chaque fois que j'essaie d'ajouter un bouton MUI à mon projet, cela fonctionne bien mais la couleur du bouton reste blanche.

La couleur revient à la normale au survol et a toujours l'effet d'entraînement lorsque vous cliquez sur le bouton. Mais lorsqu'il n'est pas en vol stationnaire, il revient en blanc.

En supprimant la directive tailwind du fichier CSS global que j'ai importé dans le fichier _app.{js,jsx.ts,tsx}, le bouton a de nouveau bien fonctionné, mais cela a également supprimé le TailwindCSS.

Existe-t-il un moyen de résoudre ce problème tout en conservant la directive ? Ou peut-être utiliser une autre méthode pour inclure le CSS tailwind ?

MISE À JOUR(15 août 2022)

L'équipe MUI a maintenant ajouté la prise en charge du CSS tailwind, veuillez suivre ce lien pour les instructions https://mui.com/material-ui/guides/interoperability/#tailwind-css

Answer 1

Le problème ici est que Tailwinds Preflig implémente le style suivant Lors de l'ajout de

@tailwind base;

Vers votre feuille de style :

button, [type='button'], [type='reset'], [type='submit'] {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
}

C'est plus spécifique que la définition de la couleur d'arrière-plan de Material-UI.

Vous pouvez résoudre ce problème en supprimant le "@tailwind base;" de vos styles et en implémentant votre propre feuille de style de réinitialisation, mais cela présente d'autres inconvénients : https://tailwindcss.com/docs/preflight