La valeur du point d'arrêt est écrasée par la valeur de déplacement sur tailwindcss

Question

J'ai un problème que je n'ai encore trouvé nulle part.

Lorsque j'utilise un remplissage ou des marges sur mobile et que je souhaite modifier ces remplissages/marges sur un écran plus grand, la valeur de base que j'ai définie pour mobile restera la même et le remplacement ne brisera pas une valeur spécifique à ce moment-là.

Voici ce que je peux voir dans le débogueur : Comme vous pouvez le voir, la valeur py-3, elle conserve et remplace la valeur py-0 qui s'applique au point d'arrêt md.

---

Ceci est la version mobile

---

Ceci est la version de bureau

---

Voici mon code, py-3 和 md:py-0 appliqué au bouton :

<div className="...">
    {languages.map((lng) => (
        <button className="px-2.5 py-3 md:py-0 text-xs leading-5 text-gray-500 text-center">
            {lng.name}
        </button>
    ))}
</div>

J'utilise taildwindcss pour une installation next.js classique sans aucun remplacement d'extension/thème. Il n'y a aucun endroit dans mon fichier CSS où je puisse remplacer ces classes.

Est-ce que j'ai raté quelque chose ?

Edit : j'ai essayé d'appliquer "!" dans mon py-0 前面： md:!py-0 mais c'est toujours pareil. Même si le mot-clé !important est ajouté correctement, il sera toujours remplacé.

Answer 1

!important L'affectation remplace ce qui suit (donc dans des circonstances normales Couverture)@media { }

Obtenez que votre .py-3 { } s'affiche correctement, sans avoir besoin de .py-3 { } 正确显示，无需需要 !important.