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.