Der Haltepunktwert wird durch den Verschiebungswert auf tailwindcss überschrieben

Question

Ich habe ein Problem, das ich noch nirgendwo gefunden habe.

Wenn ich Auffüllungen oder Ränder auf Mobilgeräten verwende und diese Auffüllungen/Ränder auf einem größeren Bildschirm ändern möchte, bleibt der Basiswert, den ich für Mobilgeräte festgelegt habe, derselbe und die Überschreibung unterbricht einen bestimmten Wert an dieser Stelle nicht.

Das ist, was ich im Debugger sehen kann: Wie Sie sehen können, behält der Wert py-3 den Wert py-0 bei und überschreibt ihn, der für den MD-Haltepunkt gilt.

---

Dies ist die mobile Version

---

Dies ist die Desktop-Version

---

Das ist mein Code, py-3 和 md:py-0 angewendet auf die Schaltfläche:

<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>

Ich verwende taildwindcss für eine klassische next.js-Installation ohne Erweiterungs-/Theme-Ersatz. In meiner CSS-Datei gibt es keine Stelle, an der ich diese Klassen überschreiben kann.

Habe ich etwas verpasst?

Bearbeiten: Ich habe versucht, „!“ in meinem py-0 前面： md:!py-0 anzuwenden, aber es ist immer noch dasselbe. Selbst wenn das Schlüsselwort !important korrekt hinzugefügt wird, wird es dennoch überschrieben.

Answer 1

!important 赋值会覆盖以下内容（因此在正常情况下 覆盖）@media { }

让您的 .py-3 { } 正确显示，无需需要 !important。